用圆角向 DIV 添加边框答案

【问题标题】：Add border to DIV with rounded corners用圆角向 DIV 添加边框
【发布时间】：2020-11-13 16:01:25
【问题描述】：

这似乎并不难做到，但我很难做到。我只想为这样的 div 添加左边框：

我尝试添加一个左边框属性（左边框：5px 纯蓝色；），但结果如下：

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

谢谢！

罗伯克

【问题讨论】：

标签： html css border border-radius

【解决方案1】：

你需要父 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>

【讨论】：

【解决方案2】：

希望这会有所帮助：

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

<div>
  Hello World
</div>

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

【讨论】：