【CSS Modules】border-bottom-left-radiusプロパティの使い方

border-bottom-left-radiusプロパティは、CSSにおいて、HTML要素の左下の角を丸めるために使用されるプロパティです。このプロパティは、要素の境界線（ボーダー）の左下隅に対して、指定された半径を持つ円または楕円の形状を適用し、角を柔らかく視覚的に表現することを可能にします。

値を設定する方法は主に二通りあります。一つは、単一の値を指定する方法です。この場合、指定された値が水平方向と垂直方向の両方の半径に適用され、対称的な丸みを生成します。例えば、border-bottom-left-radius: 10px;と記述すると、要素の左下の角は半径10ピクセルの円弧で丸められます。もう一つは、二つの値を指定する方法です。この場合、最初の値が水平方向の半径を、二番目の値が垂直方向の半径を指定します。これにより、楕円形の丸みを表現することが可能です。例えば、border-bottom-left-radius: 20px 10px;と指定すると、左下の角は水平方向に20ピクセル、垂直方向に10ピクセルの半径を持つ楕円弧で丸められます。

これらの値には、px（ピクセル）、em（相対単位）、rem（ルートem単位）、%（パーセンテージ）などの長さを示す単位を使用できます。パーセンテージを指定した場合、水平方向の半径は要素の幅に対する割合で、垂直方向の半径は要素の高さに対する割合で計算されます。

このプロパティは、主にブロックレベル要素やインラインブロック要素、テーブルセルなど、視覚的に境界線を持つ要素に適用されます。border-bottom-left-radiusプロパティは、四隅の丸みをまとめて設定できる一括指定プロパティであるborder-radiusの一部を構成しており、border-radius: 10px 20px 30px 40px;のように指定した場合、四つの値がそれぞれ左上、右上、右下、左下の順に適用されますが、個別に設定することでより細かなデザイン制御が可能です。要素の角に丸みを持たせることで、ユーザーインターフェースに親しみやすさや洗練された印象を与え、Webデザインの表現力を大きく向上させることができます。

Copy
1.element {
2  border-bottom-left-radius: 10px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません