角丸を表現する

webページを閲覧していてよく見かける角丸のボックス。
通常、画像を用いて表現することが多いですが、
CSS3のborder-radiusを使用することで表現することができます。

<div class="kadomaru">
角丸ボックスです。角丸ボックスです。角丸ボックスです。
角丸ボックスです。角丸ボックスです。角丸ボックスです。
角丸ボックスです。角丸ボックスです。角丸ボックスです。
</div>

.kadomaru {
-moz-border-radius: 10px; /*Safari、Chrome対応 */
-webkit-border-radius: 10px;　/*Firefox対応 */
background-color:#DDD;
padding:10px;

-moz-border-radiusでSafari、Google Chrome。
-webkit-border-radiusでFirefoxにて角丸が表現されます。

※IEでは対応していないので、
IEで実現するにはJavaScript等を利用する必要があります。

また以下のように個別に角の半径を設定できます。

.kadomaru2{
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-radius:20px 20px 0px 0px;
background-color:#DDD;
padding:10px;

コメントを投稿する