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