スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSを使用してボックスの角を丸める方法

DIVなどの領域でバックグラウンドに色のみを設定した場合などで
角を丸めたい場合があります。
バックグラウンドを画像で設定している場合は、画像の加工が必要になるため手間がかかりますね。
画像を貼ってある場合、画像は丸まりませんが、単純に色をつけてあるだけならCSSで設定できます。

新しいCSSの規格である「CSS3」では、

この角を丸めるための「border-radius」というプロパティが用意されていますので、
数値を修正するだけで、角丸の半径を変更できます。
しかも、ただ角をまるめているだけなので、線種などを変更しても問題ありません。

数値の単位はピクセルで設定します。私の場合は、あまり大きな丸めにしたくな為
10pxくらいで丸めています。
以下の様に記述すると四方の角が10px分丸められます。

border-radius: 10px;

それぞれの角をそれぞれの数値丸めたい場合は、以下のようにひとつずつ設定していきます。
border-top-left-radius: 10px; /* 左上 */
border-top-right-radius: 10px; /* 右上 */
border-bottom-left-radius: 10px; /* 左下 */
border-bottom-right-radius: 10px; /* 右下 */

思い通りの丸めにならなかったら、数値をもう少し上げてみても良いかと思います。
試してみてくださいね。





トラックバック

コメント

コメントを残す

Secret


スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。