marginとheightを巧みに使って、ピクセル画のように丸角を作ります。
[参考記事]テーブルで丸角
画像を使わない丸角
このスペースは画像を使わずにスタイルシートだけで丸角になっています。
[ソース]
<div style="margin: 0 10%;background: #999;">
<b style="display:block;background: #fff;">
<b style="margin: 0 5px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 3px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 2px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 1px;display:block;height: 2px;overflow: hidden;background: #999;"></b>
</b>
<h3>画像を使わない丸角</h3>
<p>このスペースは画像を使わずにスタイルシートだけで丸角になっています。</p>
<b style="display:block;background: #fff;">
<b style="margin: 0 1px;display:block;height: 2px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 2px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 3px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 5px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
</b>
</div>
<b style="display:block;background: #fff;">
<b style="margin: 0 5px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 3px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 2px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 1px;display:block;height: 2px;overflow: hidden;background: #999;"></b>
</b>
<h3>画像を使わない丸角</h3>
<p>このスペースは画像を使わずにスタイルシートだけで丸角になっています。</p>
<b style="display:block;background: #fff;">
<b style="margin: 0 1px;display:block;height: 2px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 2px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 3px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 5px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
</b>
</div>
Nifty Cornersと呼ばれる手法で、中身のないインライン要素<b>が10個も使われているためW3C仕様としてはあまりよくない。
下はグラデーションにしてみた場合です。
画像を使わない丸角
このスペースは画像を使わずにスタイルシートだけで丸角になっています。
