score:2

Accepted answer

use a pseudo-element positioned absolutely like so

div {
  width: 50vw;
  margin: auto;
  position: relative;
  padding-left: 10px;
}

div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: rebeccapurple;
  border-radius: 3px
}
<div>
  <p>lorem, ipsum dolor sit amet consectetur adipisicing elit. culpa sequi mollitia assumenda repudiandae impedit quidem, ducimus adipisci a ullam tenetur minus minima molestias provident recusandae non amet sapiente nihil ad, commodi ut optio veniam illo
    qui! enim, neque odit? laboriosam quasi aperiam, molestiae culpa ipsum corrupti animi praesentium atque exercitationem.</p>
</div>

score:0

instead of using borders, have you tried using an svg line with its stroke-linecap property set to round?

stroke-linecap: round;

https://css-tricks.com/almanac/properties/s/stroke-linecap/

edit: here is another approach if you want to stick to borders:

css border stroke line cap rounded


Related Query

More Query from same tag