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

border-radius

 border-radiusプロパティは、タグエレメントの角を丸くすることができます。

 border-radiusプロパティは、以下のプロパティを1括で定義できるプロパティです。

 値を1つだけ指定すると4つとも同じ値になります。

 border-radius: 50px;

 2つ指定すると1番目は上左(top-left)と下右(bottom-right)、2番目は上右(top-right)と下左(bottom-left)の定義になります。

 border-radius: 10px 50px;

 3つ指定すると1番目は上左(top-left)、2番目は上右(top-right)と下左(bottom-left)、3番目は下右(bottom-right)の定義になります。

 border-radius: 10px 20px 50px;

 4つ指定すると1番目は上左(top-left)、2番目は上右(top-right)、3番目は下右(bottom-right)、4番めは下左(bottom-left)の定義になります。

 border-radius: 10px 20px 30px 50px;

構文(Syntax)

CSS

border-radius: length | % | initial | inherit;

DOM(JavaScript)

値の取得
object.style.borderRadius
値の設定
object.style.borderRadius=" length | % | initial | inherit"

Values

Value摘要
length丸みの定義で、長さの単位を参照のこと。初期値は0
%丸みを%で定義
initial初期値に戻す
inherit親要素(親エレメント)のプロパティを継承

備考(Remarks)

初期値(Default value)0
継承(Inherited)no
変化(Animatable)yes

Example