CSS

Cascading Style Sheets border-bottom-right-radius property.

border-bottom-right-radius

　border-bottom-right-radiusプロパティは、ボックスの右下の角を丸くする「角丸」にしたい場合に使用する CSS3より追加されたプロパティです。角丸の形状は円または楕円にすることができ、指定する際には水平方向と垂直方向の半径のセットで表します。値のうち一つが 0 であれば、丸めは行われずに角は四角くなります。指定するのは、ボーダーの外側の輪郭です。背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、background-clipプロパティの値で定義されます。

HTML source


<div class="smp1"></div>

CSS source


.smp1 {
	width: 100px;
	height:100px;
	background-color: gray;
	border-bottom-right-radius: 40px;
}

　角丸の楕円半径は、<length>（長さ）か <percentage>（パーセンテージ）で指定します。入力する数値には、後ろに必ず「単位」をつける必要があります。単位を付け忘れると設定が反映されないので注意してください。パーセンテージで指定した場合は、要素の幅・高さの指定割合を半径とした角丸になります。

px
ピクセル。ディスプレイの点を基準とした長さ。
em
要素に設定されたフォントのサイズを基準とする長さ。フォントサイズが変わるとそれに合わせた長さとなる。

　２つの値を記述しますが、１つ目の値は水平方向、２つ目の値は垂直方向の半径となります。２つ目の値が省略された場合には、１つ目と同じ値になります。

HTML source


<div class="smp2"></div>

CSS source


.smp2 {
	width: 100px;
	height:100px;
	background-color: gray;
	border-bottom-right-radius: 60% 20%;
}

　尚、border-radiusプロパティを使用すると、ボックスの４つのコーナーの角丸をまとめて指定することができます。

　設定した角丸の半径は「境界線の幅も含めた値」と解釈されます。そのため境界線の幅が角丸の半径より大きい場合は、境界線の部分のみが丸くなります。

HTML source


<div class="smp3"></div>

CSS source


.smp3 {
	width: 70px;
	height:70px;
	background-color: gray;
	border-bottom-right-radius: 20px;
	border: 30px solid #333;
}

HTML source


<div class="smp4"></div>

CSS source


.smp4 {
	width: 70px;
	height:70px;
	background-color: gray;
	border-bottom-right-radius: 40px;
	border: 30px solid #333;
}
値１つで指定する場合：
値２つで指定する場合：

値

　円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、CSSの <length> データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。

<length>（長さ）
楕円半径の長さを指定する。（初期値は0）
<percentage>（パーセンテージ）
ボーダーボックスの幅と高さに対する楕円半径のパーセンテージを指定する。

初期値・適用対象・値の継承

初期値
0
適用対象
すべての要素。ただし、ユーザーエージェントは border-collapse が collapse である場合にtable および inline-table 要素に適用する必要はない。内部表要素での動作は、今のところ未定義。。 ::first-letter にも適用されます。
値の継承
しない