CSS border-radius 属性

定義と使用法

border-radius 属性は、4つの border-*-radius 属性を設定するために使用されるショートカット属性です。

ヒント：この属性は、要素に角のボーダーを追加することができます！

また、参照してください：

CSS3 チュートリアル：CSS3 边框

例

div 要素に角のボーダーを追加します：

div
{
border:2px solid;
border-radius:25px;
}

実際に試してみてください

ページの下部に多くの例があります。

CSS 言語

border-radius: 1-4 length|% / 1-4 length|%;

注釈：各 radii の 4つの値をこの順序で設定します。bottom-left を省略すると top-right と同じになります。bottom-right を省略すると top-left と同じになります。top-right を省略すると top-left と同じになります。

属性値

値 説明 テスト
length 角の形状を定義します。 テスト
% パーセンテージで角の形状を定義します。 テスト

例 1

border-radius:2em;

等価です：

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

例 2

border-radius: 2em 1em 4em / 0.5em 3em;

等価です：

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

技術的詳細

デフォルト値： 0
継承性： no
バージョン： CSS3
JavaScript 言語： object.style.borderRadius="5px"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5