Необходимо добавить border-radius к границе элемента

Question

Я добавляю левую границу к элементу списка.ширина границы составляет 4 пикселя.Кроме того, он должен иметь закругленные углы (border-radius 4px).

Возможно ли это через CSS?Я прошел некоторые уроки и не смог исправить это с помощью CSS.

Answer 1

Если я правильно понял, вы хотите, чтобы панель слева (граница) имела закругленные верх и низ; если вы используете рамку, вы не можете точно изогнуть ее, как я думаю, вам нужно, вам нужно создать эту полосу отдельно, чтобы она выглядела с изогнутыми углами.

Теперь вы можете построить эту панель с div, span или даже псевдоэлементами, такими как :before, это ваше дело; но я просто хочу показать вам логику того, что я имею в виду в примере ниже

.box {
  width: 200px;
  height: 50px;
}

.item {
  border-left: 4px solid blue;
  border-radius: 4px;
  /* Or
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  */
  padding-left: 10px;
}

.item2 {
  display: flex;
}

.item2 .bar {
  width: 4px;
  background-color: blue;
  border-radius: 4px;
  margin-right: 10px;
}

<div class="box item">
  <span>Your Text</span>
</div>

<hr>

<div class="box item2">
  <div class="bar">
  </div>
  <span>Your Text</span>
</div>

Answer 2

Вы можете сделать это псевдоклассом :before

h1 {
  position: relative;
  padding-left: 10px;
}
h1:before {
  content: '';
  height: 100%;
  width: 4px;
  border-radius: 10px;
  background: #000;
  display: block;
  position: absolute;
  left: 0;
}

<h1>Element Text</h1>