border-radius

角丸 border-radius

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

参照:http://www.w3.org/TR/css3-background/#the-border-radius