CSSだけで角を丸くする方法

2011-03-31 CSS

最終更新日：2011-07-24

四隅を角丸にする

「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には対応してません。