CSS3 角丸

CSS3 border-radius プロパティにより、要素に「角丸」を設定することができます。

ブラウザ・サポート

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

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

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

CSS3 border-radius プロパティ

CSS3 では、border-radius プロパティを使用して、どのような要素にも「角丸」を設定することができます。

ここに、3 つの例があります：

1. 指定した背景色を持った要素の角丸です：

Rounded corners!

2. ボーダーを持った要素の角丸です：

Rounded corners!

3. 背景画像を持った要素の角丸です：

Rounded corners!

コードは次の通りです：

例

#rcorners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}

Try it Yourself ❯

チップ: border-radius プロパティは、実際には、border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius プロパティのショートハンドプロパティです。

CSS3 border-radius - 各コーナーに指定

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

しかし、必要に応じて各コーナー別々に指定することもできます。ルールは以下の通りです：

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

3つの例を以下に示します：

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

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

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

コードは次の通りです：

例

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners6 {
    border-radius: 15px 50px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

Try it Yourself ❯

楕円形のコーナーも作成することができます：

例

#rcorners7 {
    border-radius: 50px/15px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners9 {
    border-radius: 50%;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

Try it Yourself ❯

練習問題で確認テスト！

Exercise 1 ❯ Exercise 2 ❯

CSS3 角丸のプロパティ

プロパティ	説明
border-radius	4 つ全ての border---radius プロパティを設定するためのショートハンド・プロパティ
border-top-left-radius	左上隅のボーダーの形状を定義する
border-top-right-radius	右上隅のボーダーの形状を定義する
border-bottom-right-radius	右下隅のボーダーの形状を定義する
border-bottom-left-radius	左下隅のボーダーの形状を定義する

❮ 前章へ次章へ ❯