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番目は上下方向の値になります。
border-bottom-right-radius: 50px 10px;
border は、margin と padding の間に表示される囲み線、罫線です。
4つの角を一括で丸くするには、border-radius を使用します。
ページ内 Index
構文(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を設定する必要があります。