用圆角向 DIV 添加边框

Question

这看起来并不难，但我很难做到。我只想像这样向 div 添加左边框：

我试图添加左边框属性（左边框：5px 纯蓝色；），但结果是这样的：

谁能告诉我如何在顶部和底部不带圆角的情况下添加直边边框？

谢谢！

罗伯·G

Answer 1

希望对您有所帮助：

div {
  border-radius: 5px;
  padding: 5px;
  border-left: 5px #70baff solid;
  background-color: #f5f5f5;
}

<div>
  Hello World
</div>

如果您有任何问题，请告诉我！

Answer 2

你需要父 div 来隐藏溢出

.rounded{
  border-radius: 7px;
  overflow: hidden;
}
.border{
  border-left: 6px solid blue;
  width: 100px;
  height: 70px;
  background: lightgray;
}

<div class="rounded">
<div class="border"></div>
</div>

用圆角向 DIV 添加边框

Add border to DIV with rounded corners

html

css

border

border-radius