CSS3 border-top-left-radiusプロパティ


例

div要素の左上隅に角丸の境界線を追加します：

div
{
border:2px solid;
border-top-left-radius:2em;
}

試してみる »

ブラウザサポート

表内の数字は、そのプロパティをサポートする最初のブラウザバージョン番号を示します。

-webkit-、-ms-、または -moz- の直前にある数字は、その接頭辞付きプロパティをサポートする最初のブラウザバージョン番号です。

プロパティ
border-radius 9.0 5.0
4.0 -webkit-		 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5

プロパティの定義と使用説明

border-top-left-radiusプロパティは、左上隅の境界線の形状を定義します。

ヒント：このプロパティを使用すると、要素に角丸の境界線を追加できます！

デフォルト値： 0
継承： no
バージョン： CSS3
JavaScript 構文： object object.style.borderTopLeftRadius="5px"

構文

border-top-left-radius: length|% [length|%];

注意：border-top-left--radiusプロパティの2つの長さまたはパーセント値は、楕円の4分の1の外枠の角の形状を定義します。最初の値は水平半径、2つ目は垂直半径です。2つ目の値が省略された場合、1つ目の値からコピーされます。どちらかの長さがゼロの場合、角は角ばっていて丸くなりません。水平半径のパーセントは境界ボックスの幅を参照し、垂直半径のパーセントは境界ボックスの高さを参照します。

值 説明
length 左上隅の形状を定義します。
% %を使用して左上隅の形状を定義します。

関連記事

CSS3 チュートリアル：CSS3 Borders

その他の拡張