SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【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: ←左上 →右上 →右下 ←左下 / ↑左上 ↑右上 ↓右下 ↓左下;

div {
	width:600px;
	padding:30px;
	background:#336699;
	color:#ffffff;
	border-radius: 10px 30px 90px 0 / 10px 100px 90px 0;
}

参考

border-radius @Mozilla

関連するメモ

コメント