<div> 要素の右下隅に角丸のボーダーを追加します：
div
{
border: 2px solid;
border-bottom-right-radius: 2em;
}
Try it Yourself ❯
border-bottom-right-radius プロパティは、右下隅のボ-ダーの形状を定義します。
チップ: このプロパティは、要素へ角丸ボーダーの追加を可能にします!
| デフォルト値： | 0 |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 可。animatable を参照 Try it |
| バージョン： | CSS3 |
| JavaScript 構文： | object.style.borderBottomRightRadius="25px" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
-webkit-、-moz- の後に続く数字 は、接頭辞付きで動作した最初のバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| border-bottom-right-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
border-bottom-right-radius: length|% [length|%]|initial|inherit;
注: border-top-right-radius プロパティの2つの長さまたはパーセンテージの値は、 ボーダー外側の角の形状を定義する 4 分の 1 の円弧の半径です。 最初の値は横方向の半径で、2 番目の値は縦方向の半径です。 2番目の値が省略された場合には、最初の値が使われます。 どちらかの長さがゼロの場合、コーナーは丸くならず直角になります。 横方向の半径のパーセントは、ボーダーボックスの幅を参照し、 縦方向の半径のパーセンテージは、ボーダーボックスの高さを参照します。
| 値 | 説明 | Play it |
|---|---|---|
| length | 右下隅の形状を定義します。デフォルトは 0 | Play it ❯ |
| % | 右下隅の形状を%で定義します | Play it ❯ |
| initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
CSS3 チュートリアル：CSS3 Borders
HTML DOM リファレンス：borderBottomRightRadius プロパティ