CSS3.0 で登場の角丸、border-radius
もちろんIE対応に苦労するわけで・・・・
対策は、いろいろ方法画あるようで・・・
備忘の為、記載してゆきます。
JQueryでの対応が一番簡単かも
1.jquery.corner.js.の場合(角丸以外も出来て面白そうです)
http://www.malsup.com/jquery/corner/
使い方の説明は上記のサイトにありますが、
基本は、$(this).corner("30px");
これ 例:idがBOXの要素を5pxで角丸の場合 ↓↓↓↓↓↓↓<script type="text/javascript"> $(´#box´).corner("5px");</script>
もちろん先にjsを読み込んでおく必要があります。(コピペできるように載せときます)<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> <script src="js/jquery.corner.js"></script>
そうそうもちろんCSSも
.クラス名{
border-radius: 10px; /* CSS3草案 */
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px; /* Firefox用 */
}
右上、左上、右下、左下
-webkit-border-top-left-radius:
-webkit-border-top-right-radius:
-webkit-border-bottom-right-radius:
-webkit-border-bottom-left-radius:
-moz-border-radius-topleft:
-moz-border-radius-topright:
-moz-border-radius-bottomright:
-moz-border-radius-bottomleft:
普通の指定
border-top-left-radius: 55pt 25pt
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius