border-radius プロパティ

　border-radius プロパティは、タグエレメントの角を丸めることができるプロパティです。
　エレメントの border の角を丸く表示するように指定します。エレメントの角を丸く表示するばかりではなく、画像の表示にも適応できます。

　border-radius プロパティが機能するには、border プロパティまたはborder-style プロパティで線種を指定する必要があります。

border-style: solid;
border-radius: 30px;

　値は長さまたは割合で指定します。
　値が1つの場合は、その値を半径として角を丸く表示します。
　左右と上下で半径を変えることもできます。この場合は / で区切ります。

角を左右、上下で半径を変える（Exampleを参照）

border-style: solid;
border-radius: 30px / 50px;

border-radius プロパティについて

４辺ごとの設定

　border-radius プロパティは、以下のプロパティを一括で定義できるプロパティです。
　または、以下のプロパティを使って４つの角それぞれの丸みを指定することができます。

値の指定数

　border-radius プロパティは１〜４つ値を指定することができます。値の数によって指定する角の箇所が変わります。以下はその例です。

■　値が１つ（全ての角が同じ値）

 border-radius: 50px;

■　２つ指定（１番目は上左（top-left）と下右（bottom-right）、２番目は上右（top-right）と下左（bottom-left））

 border-radius: 10px 50px;

■　３つ指定（１番目は上左（top-left）、２番目は上右（top-right）と下左（bottom-left）、3番目は下右（bottom-right））

 border-radius: 10px 20px 50px;

■　４つ指定（１番目は上左（top-left）、２番目は上右（top-right）、3番目は下右（bottom-right）、4番めは下左（bottom-left））

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


border	border-width、border-style、border-colorプロパティを一括指定
border-color	線の色
border-image	border線を画像で
border-style	線の種類
border-width	線の幅

構文(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

値が１つの場合

　border-radiusの例です。エレメントの角に丸みを持たせます。
　ここでは、丸みを30pxで指定しています。

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

左右、上下で丸みの半径を変える

　左右、上下で丸みの半径を変えることができます。

４辺それぞれで左右、上下を指定

　４辺のそれぞれの左右、上下を指定する方法です。 / で区切ります。先が４辺ごとの左右の半径で、 / の後に４辺ごとの上下の半径を指定します。