<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 プロパティ