CSSのborder-bottom-left-radiusを用いて左下の半径を設定する方法

CSS

このページでは、border-bottom-left-radiusプロパティを用いてHTML要素左下の半径を設定する方法について説明していきます。

すべてに適用するコード

以下で、具体的な例を用いて説明していきますが、全ての例において、こちらのCSSコードを適用します。

CSS

.border-bottom {
  font-size: 36px;
  width: fit-content;
  padding: 10px;
  background-color: cyan;
　margin: 25px;
}

それでは、まずpxを用いて指定する例について見ていきます。

pxを用いて指定する例

HTML

<p class="border-bottom border-bottom-left-radius--px">
  border-bottom-left-radius: 10px;
</p>
<p class="border-bottom border-bottom-left-radius--px-2-parameter">
  border-bottom-left-radius: 50px 10px;
</p>

CSS

.border-bottom-left-radius--px {
  border-bottom-left-radius: 10px;
}
.border-bottom-left-radius--px-2-parameter {
  border-bottom-left-radius: 50px 10px;
}

※ border-bottom-left-radiusプロパティの値を２つ指定することで、水平方向の半径・垂直方向の半径をそれぞれ指定することができます。

実行結果

See the Pen Untitled by Yagi-System (@ihspycal-the-lessful) on CodePen.

こうですね。
こちらの実行結果を見ていただければ、HTML要素の左下が丸くなっているのがお分かりいただけると思います。

次にパーセンテージを用いて指定する例について見ていきましょう。

パーセンテージを用いて指定する例

HTML

<p class="border-bottom border-bottom-left-radius--percentage">
  border-bottom-left-radius: 50%;
</p>
<p class="border-bottom border-bottom-left-radius--percentage-2-parameter">
  border-bottom-left-radius: 10% 50%;
</p>

CSS

.border-bottom-left-radius--percentage {
  border-bottom-left-radius: 10%;
}
.border-bottom-left-radius--percentage-2-parameter {
  border-bottom-left-radius: 10% 20%;
}

実行結果

See the Pen Untitled by Yagi-System (@ihspycal-the-lessful) on CodePen.

こうですね。
こちらも同様に要素の左下が丸くなっていますね。

まとめ

このように、border-bottom-left-radiusプロパティを用いることで、HTML要素左下の半径を設定することができます。

こちらの記事もおすすめ

CSSのborder-bottom-widthプロパティを用いて下線の太さを設定する方法

CSSのborder-bottom-styleプロパティを用いて下線のスタイルを設定する方法

CSSでborder-bottom-colorプロパティを用いて色の設定をする方法