html - 角の丸い DIV に境界線を追加する

Question

これはそれほど難しいことではないように思えますが、私は苦労しています。次のように、左の境界線を div に追加したいだけです。

border-left プロパティ (border-left: 5px solid blue;) を追加しようとしましたが、次のようになりました。

上下に丸みを付けずに直線の縁取りを追加する方法を誰か教えてもらえますか?

ありがとう！

ロブ G

Answer 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>