2008年01月22日

CSS - 角を丸くする方法

ホームページを見たときにやっぱりボックス要素のボーダーが四角だと硬いイメージを受けます。
何とかして角を丸く見せたかったのですが、うちのホームページに来る人の大半がIEのため、FirefoxやSafariで使える「-moz-border-radius」や「-webkit-border-radius」は使えません。

いろいろ検索したところ、cssで「角を丸くする」という方法はNifty Cornerで掲載されていました。
でも、このサンプルはボーダーではありません。
背景は一色で塗られています。

なんとかして背景に画像を入れたかったため、背景画像を入れられるように作り変えました。


■出来上がり。


サンプルコードは続きを見てね^^

■style.cssの内容
.c_pink{
border: solid #EF5090;
}

#midR1, #midR2, #midR3, #midR4, #midR{
border-width:0 1px;
}

#midR1, #midR2, #midR3, #midR4, #midR5, #midR6, #topR, #btmR {
display:block;
height:1px;
overflow:hidden;
}

#topR {
border-width:0 0 1px 0;
margin:0 10px;
}

#midR1 {
margin:0 1px;
height:3px;
}

#midR2 {
margin:0 2px;
height:2px;
}

#midR3 {
margin:0 3px;
}

#midR4 {
margin:0 4px;
}

#midR5 {
border-width:0 2px;
margin:0 5px;
}

#midR6 {
border-width:0 3px;
margin:0 7px;
}

#midR {
display:block;
margin:0;
padding:10px 20px;
}

#btmR {
border-width:1px 0 0 0;
margin:0 10px;
}

■htmlファイルの内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div style="width:500px">
<div id="topR" class="c_pink"></div>
<div id="midR6" class="c_pink"></div>
<div id="midR5" class="c_pink"></div>
<div id="midR4" class="c_pink"></div>
<div id="midR3" class="c_pink"></div>
<div id="midR2" class="c_pink"></div>
<div id="midR1" class="c_pink"></div>
<div id="midR" class="c_pink">
てすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすと
</div>
<div id="midR1" class="c_pink"></div>
<div id="midR2" class="c_pink"></div>
<div id="midR3" class="c_pink"></div>
<div id="midR4" class="c_pink"></div>
<div id="midR5" class="c_pink"></div>
<div id="midR6" class="c_pink"></div>
<div id="btmR" class="c_pink"></div>
</div>
</body>
</html>

trackbacks

trackbackURL:

comments

comment form

(LICALD にはじめてコメントされる場合、不適切なコメントを防止するため、掲載前に管理者が内容を確認しています。適切なコメントと判断した場合コメントは直ちに表示されますので、再度コメントを投稿する必要はありません。)

comment form