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

border-top-right-radius

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

 border-top-right-radiusプロパティが機能するには、borderプロパティborder-styleプロパティなどによるstyle指定が必要です。

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

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

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

構文(Syntax)

CSS

border-top-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-top-right-radiusの例です。2つの値を指定することで、左右方向、上下方向の丸みを別々に指定することができます。

 border-top-right-radiusプロパティを機能させるには、borderプロパティなどのstyle指定が必要です。