備忘録的プログラミングリファレンス

border-bottom-left-radius

 border-bottom-left-radiusプロパティは、エレメントの囲み線の左下の角を丸くするプロパティです。

 border-top-left-radiusプロパティが機能するには、borderプロパティなどでstyleを設定する必要があります。

左下の角を丸く
border-style: solid;
border-bottom-left-radius: 30px;

 値は以下のように、2つ定義することもできます。1番目は左右方向、2番目は上下方向の値になります。

左下の角を丸く(Exampleを参照
border-bottom-left-radius: 50px 10px;

構文(Syntax)

CSS

border-bottom-left-radius: length | % | initial | inherit;

DOM ( JavaScript )

値の取得
String = object.style.borderTopLeftRadius
値の設定
object.style.borderTopLeftRadius = " length | % | initial | inherit"

値(Values)

Value摘要
length丸みの定義で、長さの単位を参照のこと。初期値は0
%丸みを%で定義
initial初期値に戻す
inherit親要素(親エレメント)のプロパティを継承

備考(Remarks)

初期値(Default value)0
継承(Inherited)no
変化(Animatable)yes

Example

 border-bottom-left-radiusの例です。エレメントのborderに丸みを付けることで、エレメントの角に丸みを持たせることができます。
 ここでは2つの値を指定し、左右、上下で丸みを調整しています。

 border-bottom-left-radiusプロパティを機能させるには、borderプロパティなどでstyleを設定する必要があります。