端の丸いBorder

仕様

端が丸くなってるBorderをCSSで実装

ソース

例は左の場合。
:before と :after で該当要素のborderと同じ値の丸を作って、positionで位置調整すればOK。
Sassで書くのでどこの値がどうなるってのはソース参考に。

round-cap-border.scss

$width__border: 6px;
$color__border: red;
h1 {
  font-size: 18px;
  border-left-style: solid;
  border-left-width: $width__border;
  border-left-color: $color__border;
  position: relative;
  padding-left: 10px;
  &:before,
  &:after {
    content: ' ';
    background-color: $color__border;
    width: $width__border;
    height: $width__border;
    border-radius: ($width__border/2);
    display: block;
    position: absolute;
    left: -($width__border);
  }
  &:before {
    top: -($width__border/2);
  }
  &:after {
    bottom: -($width__border/2);
  }
}

デモはこちら
https://jsfiddle.net/gatespace/4p8z2jgf/