Home > CSS > CSSだけでボックスの角を丸くする:CSSメモ

CSSだけでボックスの角を丸くする:CSSメモ

  • 2008-10-06 (月)
  • CSS



ボックスの角を丸める方法は、画像を配置する方法やJavaScriptを使う方法などいくつかありますが、簡単にCSSだけで実現する方法をネットで見つけたのでメモします。

※但しこの方法は、firefox、Safari等一部のブラウザにしか対応していませんのでIEの場合は丸くなりません。

しかし、丸くならないだけで不具合はありませんのでデザイン的に角を丸めるのがそれ程重要じゃない場合や見た目のテストには最適だと思います。使用方法は各要素のスタイルシートに下記を追加するだけです。

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

例えば下記の様な場合のスタイルシートに追加した場合

スタイルシート

.test{
width: 150px;
padding: 5px;
border: 1px solid #CCCCCC;
background-color: #f3f3f3;
-webkit-border-radius: 10px; //追加
-moz-border-radius: 10px; //追加
border-radius: 10px; //追加
}

HTMLソース

<p class=”test”>
firefox、Safari等のブラウザの方は角が丸くなっていると思います。
※IE等firefox、Safari等のブラウザ以外の方は四角いままのはずです。
</p>

実行結果

firefox、Safari等のブラウザの方は角が丸くなっていると思います。
※IE等firefox、Safari等のブラウザ以外の方は四角いままのはずです。

firefox等のブラウザの方は丸くなっていると思います。ブラウザを選ぶのは痛いですが、今後CSS3では、角を丸めるプロパティが追加になるようですので、利用価値はあると思います。


どうしても全てのブラウザで角を丸めたい場合は画像を背景に使うかJavaScriptを使う事で可能です。

参考記事:Firefox,Safariで通用する角を丸めるCSS (IEには非対応) – ObjectDesign

タグ:

 この記事をブックマークする : 

Comments:0

この記事にコメントする
お名前とメールを記憶する

Trackbacks:0

この記事のトラックバックURL
http://yame-tea.xsrv.jp/css/204.html/trackback
Listed below are links to weblogs that reference
CSSだけでボックスの角を丸くする:CSSメモ from 気ままにゆっくり自分時間...

Home > CSS > CSSだけでボックスの角を丸くする:CSSメモ

アウトドア&スポーツ ナチュラム
Tag Cloud

CSS (1)
FireFox (3)
WordPress (13)
ひとりごと… (8)
アクアリウム (2)
インターネット (4)
フリーソフト (1)
ホームページ (1)
株取引 (2)
自作PC (2)

WP Cumulus Flash tag cloud by Roy Tanck and Luke Morton requires Flash Player 9 or better.

Feeds
Mobile
携帯サイト

このページのTOPへ