CSS3 border-radius プロパティ

❮ 前章へ完全な CSS リファレンス次へ ❯

例

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

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

Try it Yourself ❯

他の "Try it Yourself" 例が下にあります。

定義と用法

border-radius プロパティは、要素に角丸を追加するために使用します。

border-radius プロパティは、4 つの border-*-radius プロパティを設定するためのショートハンド・プロパティです。

border-radius プロパティに一つの値だけを指定した場合、この半径は 4 コーナーすべてに適用されます。

しかし、必要な場合は各コーナー個別に指定することができます。ルールは以下の通りです：

値が 4 つの場合： 最初の値は左上に、2 番目の値は右上に、3 番目の値は右下に、4 番目の値は左下に適用されます
値が 3 つの場合： 最初の値は左上に、2 番目の値は右上と左下に、3 番目の値は右下に適用されます
値が 2 つの場合： 最初の値は左上と右下に、2 番目の値は右上と左下に適用されます
値が 1 つの場合： 4 コーナー全てが同じ半径になります

1. 値が 4 つの場合 - border-radius: 15px 50px 30px 5px:

2. 値が 3 つの場合 - border-radius: 15px 50px 30px:

3. 値が 2 つの場合 - border-radius: 15px 50px:

デフォルト値：	0
継承：	継承する
アニメーション可否：	可。animatable を参照 Try it
バージョン：	CSS3
JavaScript 構文：	object.style.borderRadius="25px" Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

-webkit-、-moz- の後に続く数字は、接頭辞付きで動作した最初のバージョンです。

プロパティ
border-radius	5.0 4.0 -webkit-	9.0	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

CSS 構文

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

注: 各半径の 4 つの値は、それぞれ左上、右上、右下、左下の順番に設定されます。左下を省略した場合は、右上と同じになります。右下を省略した場合は、左上と同じになります。右上を省略した場合は、左上と同じになります。 If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

プロパティの値

値	説明	Play it
length	コーナーの形状を定義します。デフォルトは 0 です	Play it ❯
%	コーナーの形状を % で定義します	Play it ❯
initial	プロパティにデフォルト値を設定します。initial を参照	Play it ❯
inherit	このプロパティは親要素を継承します。inherit を参照

例 1

border-radius:2em;

is equivalent to:

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;

is equivalent to:

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;

その他の例

例

角丸を使用する 3 つの例：

/* Example 1: Rounded corners for an element with background color */
#rcorners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

/* Example 2: Rounded corners for an element with a border */
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

/* Example 3: Rounded corners for an element with a background image */
#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}