Добавить границу к DIV с закругленными углами

Question

Кажется, это будет не так уж и сложно, но мне это нелегко. Я просто хочу добавить левую границу к div вот так:

Я попытался добавить свойство border-left (border-left: 5px solid blue;), но это привело к следующему:

Может кто подскажет, как добавить рамку с прямым краем без закругления сверху и снизу?

Благодарность!

Роб Джи

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>

Answer 2

Надеюсь это поможет:

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

<div>
  Hello World
</div>

Дайте знать, если у вас появятся вопросы!