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

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

 border-top-left-radius プロパティは、タグエレメントの左上の角のみを丸くする CSS のプロパティです。
 値は長さまたは割合で指定します。

 このプロパティが機能するには、border プロパティborder-style プロパティで style を設定する必要があります。

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

 値が1つの場合は、その値を半径として角を丸く表示します。

2つを指定。1番目は左右方向、2番目は上下方向の値(Exampleを参照
border-top-left-radius: 50px 10px;

 値が2つの場合は、1番目が左右の半径、2番めが上下の半径を表します。

構文(Syntax)

CSS

border-top-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-top-left-radiusの例です。エレメントの左上の角に丸みを持たせます。
 ここでは、2つの数値で指定しています。

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