CSS

2021.02.19

【CSS】角丸線をつくるには?borderの端を丸くする方法

borderの角を丸くするのは、「border-radius」というCSSプロパティを使用することで可能です。

しかし、テキストに下線として引いたborderの端を丸くするには…?

今回はborderの端を丸くする方法をご紹介します。

border-radiusではborderの端を丸くできない

borderの線の端を丸くするのは、「border-radius」では実現できません。

試しにテキストにborder-bottomを指定し下線を引き、border-radiusを指定してみました。

まずは、「テキスト1」をご覧ください。

See the Pen borderの端を丸くする(失敗例) by spiqa design (@spiqa_design) on CodePen.

下側しか丸くなりません。

この場合、spanタグの四方が丸くなるため、spanタグの上端が丸くなっています。

「テキスト2」はborder-bottomだけでなく、四方を指定しました。spanタグの四方が丸くなっているのがわかりますね。

「border-bottomの四方を丸くする」という指定はできないのです。

疑似要素(before, after)で下線を表示させる

解決策としては、疑似要素(before, after)を使用して下線を表示させます。

See the Pen borderの端を丸くする by spiqa design (@spiqa_design) on CodePen.

これはborderに見せかけてborderではなく、widthとheightで長方形を作り、背景色を敷いたものです。

heightのpx数を短く、widthのpx数を長く指定することで、横線をつくります。

作ったborderを、position: absoluteでテキスト下部に配置させて完成です。

角丸線を応用したデザイン

See the Pen qBqrqLv by spiqa design (@spiqa_design) on CodePen.

見出しでよく見る、左側にバーがついているデザインです。

縦線を作る場合は、heightを長く、widthを短くします。

上記コードでは、height: 100%;、width: 5pxに指定しています。

線の端が丸いだけで、かわいくポップな印象になりますね!

疑似要素(before, after)で作った下線は改行に対応できない

この疑似要素(before, after)で作った下線ですが、改行には対応できません。

以下コードをご覧ください。

See the Pen 下線を丸くする by spiqa design (@spiqa_design) on CodePen.

改行させたテキスト下に線は追従せず、一番下にあるのみです。

改行させない見出しなど、ここぞという時に使うのにおすすめです。

まとめ

  • border-radiusでは線の端を丸くすることはできない
  • 疑似要素(before, after)で線を作ることで線端を丸くすることができる
  • 疑似要素(before, after)で作った線は、改行するテキストに追従することはできない

かんたんにできそうなですが、意外に一手間必要なデザインです。

ポップなデザイン、かわいいデザインなどに使ってみてください!

0

関連記事

  • 2021.07.20

    画面遷移時にページ全体をフェードさせる方法

    CSS

    JavaScript

  • 2021.07.14

    CSSだけで固定背景(パララックスデザイン)を実装する方法【iOS対応方法も紹介】

    CSS

  • 2021.07.13

    (簡単)inputをクリックしたときの枠線の色を変える

    CSS

おすすめ記事

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!