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


例

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

div { border:2px solid; border-bottom-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-bottom-left-radius プロパティは、左下隅の境界線の形状を定義します。

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

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

構文

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

注意：注: 2つの値を設定した場合、1つ目は下の境界線に、2つ目は左の境界線に使用されます。2つ目の値を省略した場合は、1つ目の値がコピーされます。どちらかの値が0の場合、角丸は設定されず、角は直角になります。

/* 圆形 */
/* border-bottom-left-radius: radius */
border-bottom-left-radius: 3px;

/* 椭圆形 */
/* border-bottom-left-radius: 水平方向 垂直方向 */
border-bottom-left-radius: 0.5em 1em;

border-bottom-left-radius: inherit;
值 説明
length 右下隅の形状を定義します。
% % を使用して右下隅の形状を定義します。

関連記事

CSS3 チュートリアル:CSS3 ボーダー

その他の拡張