CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS border-right 属性 CSS border-left-width 属性

CSS3 border-radius 属性の使用方法と例

border-radius属性は、要素の角を丸角に設定します。それは、border-top-left-radius、border-top-right-radius、border-bottom-right-radiusおよびborder-bottom-left-radius属性のショートカット

以下のテーブルは、この属性の使用方法とバージョン履歴、およびJavaScriptスクリプトでの使用構文の説明を示しています。

デフォルト値：	0
適用範囲：	すべての要素
継承：	ありません
アニメーション可能：	はです。参照してください：アニメーション属性。
バージョン：	CSS3の新機能
JavaScriptの構文：	object object.style.borderRadius="8px"

注意：border-radiusは、境界線が未定義または値がnoneに設定されていても、要素の背景を丸くする属性です。

border-radiusの使用構文

この属性の構文は以下の通りです：

border-radius:[　length　|　percentage　]　1　to　4　values　
　\-------------------------------/
　　　　　　　　　　　　First　radii
/　[length　|　percentage　]　1　to　4　values　|　initial　|　inherit
　　　\------------------------------/
　　　　　　　　\"

Second　radii　(optional)

指定された場合、このショートカットシンボルは1、2、3、または4つのスペースで区切られた値を取ることができます。1つの値の順番にすべての角の半径を定義します。
指定された場合、2つの値の順番に左上と右下、右上と左下に適用されます。
指定された場合、3つの値の順番に左上、右上、左下、右下に適用されます。
指定された場合、4つの値の順番にそれぞれ左上、右上、右下、左下に適用されます。

以下の例では、border-radius属性。

例

　　div　{
　　　border:　2px　solid　#f08080;
　　　border-radius:　20px;
　　}

テストをしてみてください‹/›

注意：オプションの第二の長さ値（「」で始まる） /「」で始まる）は角の垂直半径を定義し、そのため角の形状は四分の1円です。第二の長さを省略したり、同じ長さに設定すると、角の形状は四分の1円になります。どちらの長さも0の場合は、角は正方形ではなく丸角になります。

属性値

以下のテーブルはこの属性の値を説明しています。

値	説明
length	px、pt、cm、emなどの長さ値で指定できますが、負の値は使用できません。
percentage	半径の大きさをパーセンテージで指定します。円角の場合、水平半径は要素のフレームの幅に対して、垂直半径は要素のフレームの高さに対してパーセンテージで計算されます。負の値は使用できません。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のborderを使用します-radiusの属性値。

ブラウザ互換性

border-radius属性のブラウザの互換性について、以下のテーブルにはその属性をサポートするブラウザの最低バージョン番号が示されています；すべての主要ブラウザがこの属性をサポートしています。

	Firefox 4+ Google Chrome4+ Internet Explorer 9+ Apple Safari 5+ Opera 10.5+

警告： Internet Explorer 8およびそれ以前のバージョンではこのborderをサポートしていません-radius属性。IE9およびそれ以降のバージョンでサポートされています。

さらに詳しく

チュートリアルを参照してください：CSS Border、CSS3 Border。

CSS border-right 属性 CSS border-left-width 属性