段落を角丸にする

■動作ブラウザ　【 IE:-　 NN:6.0　 Safari:1.0】
Internet Explorer Netscape Navigator iCab Safari
3.0x 4.0x 4.5 5.0x 5.5 6.0 2.0x 3.0x 4.0x 4.x 6.0 7.0 2.x 1.x
Windows × × - × × × × × × × ○ ○ - -
Macintosh × × × × - - × × × × ○ ○ × ○
UNIX - - - - - - × × × × ○ ○ - -
Dreamcast - - - - - - - - - - - -

ポイント div:before {
content:url(lu.gif);
background:#004E98 url("ru.gif") no-repeat top right;
display:block;
}
div:after {
content:url(ld.gif);
background:#004E98 url("rd.gif") no-repeat top right;
display:block;
}
説　　明 角丸にするにはbefore, afterを使って段落の先頭と末尾に画像を入れます。contentで画像を指定し、片側の画像をbackgroundで背景画像として指定します。背景画像なので繰り返し表示しないようにno-repeatを指定し、top rightのように表示位置を指定します。display:blockを指定しブロックレベル要素に指定します。
サンプルではlu.gifが左上の画像、ru.gifが右上の画像、ld.gifが左下の画像、rd.gifが右下の画像になっています。
サンプル <html>
<head>
<title>角丸にする</title>
<style type="text/css"><!--
div { width:320px;
background-color:#004E98;
color:white;
}
div:before {
content:url(lu.gif);
background:#004E98 url("ru.gif") no-repeat top right;
display:block;
}
div:after {
content:url(ld.gif);
background:#004E98 url("rd.gif") no-repeat top right;
display:block;
}
--></style>
</head>
<body>
角丸にします。<br>
<br>
<div class="top">
　ここの文章が表示されている段落は角が丸くなって表示されます。<br>
ただし、IEなどbeforeに対応していないブラウザでは正しく表示されません。
</div>
</body>
</html>
補足説明 Opera 7でも正しく動作します。IEでは角丸にならずに普通の段落として表示されます。

■サンプルを実行する　>>実行
 ■各ブラウザでの動作結果を見る　>>View!