■サンプルソース
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css"> #test { -webkit-border-radius: 20px; -moz-border-radius: 20px; background-color: #00FFCC; width: 200px; padding: 50px; } </style> </head> <body> <div id="test"> この丸角はFirefoxやSafari3では表示されるが、Internet ExplorerやOperaでは従来どおりの角ばった表示しかされない。 </div> </body>
■実際の表示
対応ブラウザ(Firefox、Safari3)でご覧ください。その他のブラウザでは従来どおりの角ばった表示しかされません。
この丸角はFirefoxやSafari3では表示されるが、Internet ExplorerやOperaでは従来どおりの角ばった表示しかされない。
■注意
- 現在のところ大多数が使用しているIEでは未対応の為、IEユーザーへの配慮が必要である。
■Firefoxにおけるプロパティ名
-moz-border-radius
■Safari3におけるプロパティ名
-webkit-border-radius
■CSS3におけるプロパティ名
border-radius