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

実際には今のところ純粋な border の端を丸めることはできません。

border-radius を使えば出来そうな気もするのですがやってみると上手くいかないです。

round-cap-border

border-radius を使うと半円のような感じになってしまいます。

下線に border-radius

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

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; /* 線幅 */
}
スポンサーリンク

デモ

ここに角丸下 border

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

上線の場合

下線以外も作れます。

CSS

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

デモ

ここに角丸上 border

上につける場合は :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; /* 線幅 */
}

デモ

ここに角丸左 border

横線の場合は少し上の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; /* 線幅 */
}

デモ

ここに角丸右 border

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

まとめ

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

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

h2-round-cap

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

  1. ぴよ

    はじめまして。
    HTMLとCSSを勉強している初心者です。
    今回はこの記事を読んでいてわからないことがあったので、コメントしました。
    純粋なborderの端を丸めることはできないと冒頭に書いてありましたが、純粋なborderというのがどのようなものかよくわからなかったので、教えていただけたらと思います。
    また、この記事に載っているborderの端を丸くする方法と、以下のコードのようにする方法ではどのような違いがあって、どんなメリットデメリットがあるのかについても教えていただけたらうれしいです。

    端丸

    div {
    border: 5px solid black;
    border-radius: 50px;
    }

    長文失礼しました。よろしくおねがいします。

    2016-12-03 9:47 Reply
    • zz

      ぴよさんが書いている CSS は「div を4辺すべて border で囲った場合の角丸」ですよね。この記事は下線のみ引いた場合、その下線自体の両端を丸める方法です。根本的にやりたいことが異なります。

      メリットデメリットというよりは見た目が違うという答えでいいでしょうか。

      2016-12-03 20:38 Reply
      • ぴよ

        なるほど…的外れ(?)なことを聞いていたようです。
        返信ありがとうございました!

        2016-12-03 21:59 Reply