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

border-bottom-right-radiusプロパティは、要素の右下隅の角をどれくらい丸くするか、つまり右下の角丸の半径を定義するプロパティです。このプロパティを使用することで、四角い要素の右下の角を、より柔らかい印象の丸みを帯びた形状で表示することができます。

値は、ピクセル（px）やemなどの長さを示す単位、またはパーセンテージ（%）で指定します。単一の値を指定した場合、その値が水平方向と垂直方向の両方の半径となり、均等な円弧で角が丸められます。例えば、「10px」と指定すると、右下の角は半径10ピクセルの円の四分の一の形状で丸くなります。

また、二つの値をスペースで区切って指定することも可能です。この場合、一つ目の値が水平方向の半径、二つ目の値が垂直方向の半径を表します。これにより、楕円形の角丸を作成でき、より複雑なデザイン表現が可能になります。例えば、「10px 20px」と指定すると、右下の角は水平方向に10ピクセル、垂直方向に20ピクセルの楕円の四分の一の形状で丸められます。

値に「0」を指定すると、角は一切丸くならず、直角のまま表示されます。このプロパティは、要素の背景や境界線に視覚的な影響を与え、ウェブページの見た目を柔軟にカスタマイズするために広く利用されます。ただし、テーブル要素でborder-collapseプロパティがcollapseに設定されているセルに対しては、このプロパティは適用されない点に注意が必要です。

Copy
1div {
2  border-bottom-right-radius: 10px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません