CSS ボーダーボトム左下角半径属性

定義と使用法

border-bottom-left-radius 属性は、左下角の境界線の形状を定義します。

ヒント：この属性は、要素に角円境界線を追加することができます。

も参照してください：

CSS3 チュートリアル：CSS3 边框

例

div要素の左下角に角円境界線を追加します：

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

実際に試してみる

CSS 文法

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

注釈：border-bottom-left-radius 属性の長さ値と百分比值は、四分の円弧（外部境界線の角の形状を定義）の半径（radii）を定義します。最初の値は水平半径、第二の値は垂直半径です。第二の値を省略すると、最初の値がコピーされます。長さが0の場合、角は四角形ではなく円形になります。水平半径の百分比值は境界ボックスの幅を参照し、垂直半径の百分比值は境界ボックスの高さを参照します。

属性値

値 説明 テスト
length 左下角の形状を定義します。 テスト
% 左下角の形状を百分比值で定義します。 テスト

技術的詳細

デフォルト値： 0
継承性： いいえ
バージョン： CSS3
JavaScript 文法： object.style.borderBottomLeftRadius="5px"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

－webkit- または －moz- が付いた数字は、プレフィックスを使用する最初のバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5