CSSだけでborderの端を丸くする

細長い長方形の端を丸める

border-radius では 端だけを丸めることはできないので、ここでは border を使うのではなく細長い長方形の疑似要素を作りその頂点を丸くすることで角丸な線を実現します。

HTML

<div class="round-cap">ここに角丸下 border</div>

CSS

.round-cap-bottom:after {
    background-color: #f48fb1; /* 線色 */
    border-radius: 5px; /* 線幅の半分 */
    content: "";
    display: block;
    height: 10px; /* 線幅 */
}

デモ

細いと端が丸まっているのかわかりにくいのであえて太くしています。しっかりと角丸になっています。

上線の場合

下線以外も作れます。

CSS

.round-cap-top:before {
    background-color: #f48fb1; /* 線色 */
    border-radius: 5px; /* 線幅の半分 */
    content: "";
    display: block;
    height: 10px; /* 線幅 */
}

デモ

上につける場合は :after ではなく :before のほうが簡単です。

左線の場合

CSS

.round-cap-left:before {
    background-color: #f48fb1; /*線色*/
    border-radius: 5px; /* 線幅の半分 */
    content: "";
    display: inline-block;
    height: 40px; /* 線の長さ */
    margin-right: 10px; /* 線右の余白 */
    vertical-align: middle;
    width: 10px; /* 線幅 */

}

デモ

横線の場合は少し上の2つと違います。inline-block 要素にして vertivcal-align で縦位置を調整します。線の長さを指定しなくてはいけないので実用性に欠けるかもしれませんが、1行の要素に付ける左線であればこんな感じで書けます。

若干ずれているようにもブラウザによっては感じるので微調整は必要かもしれません。

右線の場合

CSS

.round-cap-right:after {
    background-color: #f48fb1; /*線色*/
    border-radius: 5px; /* 線幅の半分 */
    content: "";
    display: inline-block;
    height: 40px; /* 線の長さ */
    margin-left: 10px; /* 線左の余白 */
    vertical-align: middle;
    width: 10px; /* 線幅 */

}

デモ

こちらは後ろにつくので :after 要素が良いです。あまり使いどころがない気がしますが右線も可能です。

まとめ

残念なことに角丸下線以外はあまり使いどころがない気がしますが、SVG などの画像を使って作るよりは簡単なやり方ではないかと思います。

後々 round-cap あたりの名前で CSS プロパティに採用されれば嬉しいですが今のところその予定はありません。

現在このブログでも h2 要素が角丸直線になっています。パっと見で気が付きません。