Nifty Corners: rounded corners without images
<http://pro.html.it/esempio/nifty/>
(via Hatena::Bookmark)
画像なしでコーナーを丸くする方法。IEでもFFでもOK。かなり使えそう。
example:

<style>
#wakuwaku {background: #f8f;width:6em;}
#wakuwaku p {margin:0 0 0 0;text-align:center}
.rtop, .rbottom{display:block;background: #FFF}
.rtop *, .rbottom *{display: block; height: 1px;
overflow: hidden; background: #f8f}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px} 
</style>
<div id="wakuwaku">
<b class="rtop">
 <b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b>
</b>
<p>あいうえお</p>
<b class="rbottom">
 <b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b>
</b>
</div> 

from <http://pro.html.it/esempio/nifty/nifty1.html>



追記050320:
Nifty Cornersについて考える - 徒書
<http://www.akatsukinishisu.net/itazuragaki/html/
think_about_Nifty_Corners.html>

元記事ではWeb標準についても配慮しており、最終的には、HTMLに余計な
マークアップを加えることをせず、角を丸くするのに必要な要素は
DOM(Javascript)で加えるという手法をとっている。[...]しかしながら日
本語で紹介される際に、DOMを使う部分がすっぱり抜け落ち、HTML + CSS
だけの部分が紹介されてしまっている。

確かに！ 上の example は角丸め部分を埋め込んでいる。
興味のある部分を抽出しただけだから。

まあ、それもなんなわけなので example を書き直してみました。

<script type="text/javascript">
window.onload=function(){
  var o = document.getElementById('wakuwaku');
  o.innerHTML = '<b class="rtop"><b class="r1"></b><b class="r2"></b>'
  + '<b class="r3"></b><b class="r4"></b></b>' + o.innerHTML 
  + '<b class="rbottom"><b class="r4"></b><b class="r3"></b>'
  + '<b class="r2"></b><b class="r1"></b></b>';
}
</script> 
<style>
#wakuwaku {background: #f8f;width:6em;}
#wakuwaku p {margin:0 0 0 0;text-align:center}
.rtop, .rbottom{display:block;background: #FFF}
.rtop *, .rbottom *{display: block; height: 1px;
overflow: hidden; background: #f8f}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px} 
</style>

<div id="wakuwaku"><p>あいうえお</p></div> 

「すぐ試せるサンプル」を目指すため JavaScript と CSS は埋め込み。
別ファイルがベターかと。あ、角丸め追加部分は関数化ね。あと、
innerHTML はダサいですか？
というか、そもそもこれをベースに何かするべきではないです。
オリジナル実装（ちゃんとしたやつ）をご利用ください。
<http://pro.html.it/esempio/nifty/niftyCodice.html>
使い方は <http://pro.html.it/esempio/nifty/> の後半にあります。


■市瀬裕哉, 福島英児, 望月真琴 / 実践Web Standards Design-Web標準の基本とCSSレイアウト&Tips

■加藤善規, 平澤隆, 両見 英世 / Web標準XHTML+CSSデザイン - クリエイターが身につけておくべき新・100の法則。