四隅を角丸にする

「border-radius」を使ってボックスの四隅を丸くする。

各ブラウザの独自拡張
○Firefox:「-moz-
○Safari、Google Chrome:「-webkit-
を加えて以下のように記述します。
(角丸の半径を10ピクセルにする場合)

CSS:

border-radius: 10px;

Firefox:

-moz-border-radius: 10px;

Safari、Google Chrome:

-webkit-border-radius: 10px;

まとめて書くとこんな感じ

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

個別にも指定することができます。

div.sample{
    -webkit-border-top-left-radius: 10px;  //左上
    -webkit-border-top-right-radius: 10px;  //右上
    -webkit-border-bottom-right-radius: 10px;  //右下
    -webkit-border-bottom-left-radius: 10px;  //左下
    -moz-border-radius-topleft: 10px;  //左上
    -moz-border-radius-topright: 10px;  //右上
    -moz-border-radius-bottomright: 10px;  //右下
    -moz-border-radius-bottomleft: 10px; //左下
}

※IEやOperaには対応してません。