KH-WEBLOG TOP > WEBメモ > CSS > CSSだけで角を丸くする方法

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

四隅を角丸にする

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

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パンくずリスト パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事