【CSS】角丸 border-radius
概要
CSS3のborder-radiusだけでいけるよ！
-webkit-border-radius も -moz-border-radius も、使うのをやめよう！
CSS3のborder-radius 使えます
border-radiusのサポート状況は以下のとおり。ひどく古くない通常のフルブラウザなら、border-radiusが使える。
| ブラウザ | 独自実装 | border-radius 実装 |
|---|---|---|
| Firefox (Gecko) | 1.0（1.7以降） -moz | 4.0 (2.0) |
| Chrome | 0.2 -webkit | 4 |
| Internet Explorer | 9 | |
| Opera | 10.5 | |
| Safari | 3.0 -webkit | 5 |
| iOS Safari | 3.2 -webkit | どう？ |
| Android Browser | 2.1 -webkit | どう？ |
デモ
border-radiusで、いろんな大きさに丸くする。
4つ/4つ指定するときは。左上から時計回りに4つを、水平方向←→ / 垂直方向↑↓ で書く。
border-radius: ←左上 →右上 →右下 ←左下 / ↑左上 ↑右上 ↓右下 ↓左下;
4つ/4つ指定するときは。左上から時計回りに4つを、水平方向←→ / 垂直方向↑↓ で書く。
border-radius: ←左上 →右上 →右下 ←左下 / ↑左上 ↑右上 ↓右下 ↓左下;
div {
width:600px;
padding:30px;
background:#336699;
color:#ffffff;
border-radius: 10px 30px 90px 0 / 10px 100px 90px 0;
}
コメント