border-bottom-right-radius

style.css

/* 50%の正円の角丸 */
div.test { border-bottom-right-radius: 50%;}

/* 水平半径50px、垂直半径25px（楕円の角丸） */
div.test1 { border-bottom-right-radius: 50px 25px;}

/* pxで指定 */
div.test2 { border-bottom-right-radius: 8px;}

/* 角丸なし（初期値） */
div.test3 { border-bottom-right-radius: 0;}

/* 右下だけ大きく丸めた形を作る実践例 */
.rounded-bottom-right {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 40px;
	border-bottom-left-radius: 0;
}

/* ショートハンド border-radius との比較 */
div.shorthand { border-radius: 0 0 20px 0;}           /* まとめて指定（右下のみ） */
div.longhand  { border-bottom-right-radius: 20px;}    /* 個別指定 */

以下のサンプルの背景色は『#00f』を指定しています。

<div style="border-bottom-right-radius: 50%; background-color: #00f; margin: 0 auto; width: 100px; height: 100px;"></div>

<div style="border-bottom-right-radius: 50px 25px; background-color: #00f; margin: 0 auto; width: 100px; height: 100px;"></div>

デスクトップ

Chrome

4 以降 ○

3 △

2 △

1 △

↑ prefix『-webkit-』が必要

Firefox

4 以降 ○

3 △

2 △

1 △

↑ 『-moz-border-radius-bottomright』として対応

Safari

5 以降 ○

4 △

3 △

↑ prefix『-webkit-』が必要

2 以前 ×

Edge

12 以降 ○

IE

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

10.5 以降 ○

9 以前 ×

モバイル

iOS Safari

4.2 以降 ○

3 △

2 △

1 △

↑ prefix『-webkit-』が必要

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN / Can I Use に基づいています。

要素の右下の角丸の値を指定できます

『%』で大きさを指定した場合、基準となる相対値は要素の大きさ(ボーダーボックス)となります。

半角スペースで区切ることで水平方向と垂直方向の半径を個別に設定することができます。半角スペースより前の値が水平方向の半径、半角スペースより後の値が垂直方向の半径です。これにより角を楕円型で丸めることが可能です。半角スペースを省略した場合は全て同じ半径の円(正円)として描画されます。

/* div { border-bottom-right-radius: 水平方向の値 垂直方向の値;} */
div.test { border-bottom-right-radius: 50% 25%;}

尚、一部の古いAndroidの標準ブラウザで『border-bottom-right-radius』プロパティの値を『%』で指定すると描画が行われないバグが存在しますのでご注意ください。