Add border to DIV with rounded corners

Question

This seems like it wouldn't be all that hard to do, but I'm having a hard time with it. I just want to add a left border to a div like this:

I tried to add a border-left property (border-left: 5px solid blue;), but that produced this:

Can anyone tell me how to add a border with a straight edge without the rounding at the top and bottom?

Thanks!

Rob G

Answer 1

you need the parent div to hidding overflow

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