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

border-top-right-radius プロパティ

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

 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指定が必要です。