Need to add border-radius to the border of an element

Question

I am adding a left border to the list-item element. width of border is 4px. Also, it needs to have rounded corners (border-radius of 4px).

Is this possible through CSS? I had gone through some tutorials and not able to fix this via CSS.

Answer 1

You can do this by pseudoclass :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>