- Safari 3 CSS Support » CSS, JavaScript and XHTML Explained
- Rounded borders, create them with CSS! - CSS3 . info
各ブラウザが独自で用意している拡張CSS（CSS extensions）を利用して、角丸コーナーを作ろうという話。CSS3 にborder-radiusというボーダーの角を丸くするためのプロパティが提案されており、ゆくゆくはborder-radiusにスタイルが引き継がれていくのかなと推測しています。
CSSの指定の仕方は簡単で、下記のようにwebkitやmozのプレフィックスをつけて指定するだけ。webkitはwebkitとsafari向け、mozはmozilla系のブラウザ向けの指定。IEでは適用されません。
-moz-border-radius: 5px; -webkit-border-radius: 5px;
実際に右にある「最近のブログ記事」のリストに指定してみました。若干、カクカクした感じになりますけど、個人的には許容範囲。
そのほかにもブラウザが独自に用意している拡張CSSはたくさんあって、そのへんは下記のリンクなどが参考になります。これでしばらくは楽しめそうです。
ulタグの中にあるaタグで指定している背景色が、角丸のボーダーの上にのっかってしまうみたい。それでよけいにカクカクに見せていたみたい。
かなり猥雑になってしまうけれど、リストの始めに「first」、終わりに「last」というclassを追加して、aタグに角丸のボーダーを左上、右上、左下、右下のそれぞれ別々に指定するかたちにしてみました。