CSS3 角丸
CSS3 角丸
CSS3 の border-radius プロパティを使うと、あらゆる要素に「角丸」を適用できます。
ブラウザサポート
表内の数字は、そのプロパティをサポートする最初のブラウザバージョンを示します。
-webkit- または -moz- の前の数字は、そのプレフィックスをサポートする最初のバージョンを示します。
| プロパティ | |||||
|---|---|---|---|---|---|
| border-radius | 9.0 | 5.0 4.0 -webkit- |
4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS3 border-radius プロパティ
CSS3 の border-radius プロパティを使うと、あらゆる要素に「角丸」を適用できます。
以下は3つの例です：
1. 背景色を指定した要素の角丸：
角丸！
2. 枠線を指定した要素の角丸：
角丸！
3. 背景画像を指定した要素の角丸：
角丸！
コードは次のとおりです：
例
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
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;
}
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
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;
}
試してみる »
CSS3 border-radius - 各角の指定
border-radius プロパティに値を1つだけ指定すると、4つの角が丸くなります。
ただし、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: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
border-radius: 15px 50px 30px 5px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
試してみる »
楕円形の角も作成できます：
例
#rcorners7 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
試してみる »
CSS3 角丸プロパティ
| プロパティ | 説明 |
|---|---|
| border-radius | 4つの角すべての border-*-*-radius プロパティの省略形 |
| border-top-left-radius | 左上隅の丸みを定義します |
| border-top-right-radius | 右上隅の丸みを定義します |
| border-bottom-right-radius | 右下隅の丸みを定義します |
| border-bottom-left-radius | 左下隅の丸みを定義します |