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

border-bottom-right-radius

 border-bottom-right-radiusプロパティは、タグエレメントの右下の角を丸くするプロパティです。

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

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

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

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

 border は、margin と padding の間に表示される囲み線、罫線です。

 4つの角を一括で丸くするには、border-radius を使用します。

構文(Syntax)

CSS

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

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