角丸の表現

この記事が収まっているボックスは見るブラウザによっては、角が丸まっているのですがこれはCSS3の「border-radius」というプロパティを使っています。

各ブラウザとも正式に対応してくれれば

div.box{
	border-radius: 6px;
	}

で、良いようなのですが、safari、firefox、ともに別の方法での対応が必要となり、

div.box{
	border-radius: 10px;/* CSS3草案 */
	-webkit-border-radius: 10px;/* Safari,Google Chrome用 */
	-moz-border-radius: 10px;/* Firefox用 */
	}

のよーに記述をしています。非対応ブラウザは角が丸まらないだけで、あまり表示リスクはなさそうです。
部分的な角丸など、いろいろなパターンを説明しているページを見つけたのでご紹介→リンク

この記事のURL

Tweet