各ブラウザが独自で用意している拡張CSS（CSS extensions）を利用して、角丸コーナーを作ろうという話。CSS3 にborder-radiusというボーダーの角を丸くするためのプロパティが提案されており、ゆくゆくはborder-radiusにスタイルが引き継がれていくのかなと推測しています。
CSSの指定の仕方は簡単で、下記のようにwebkitやmozのプレフィックスをつけて指定するだけ。webkitはwebkitとsafari向け、mozはmozilla系のブラウザ向けの指定。IEでは適用されません。
1 | -moz-border-radius: 5px; |
実際に右にある「最近のブログ記事」のリストに指定してみました。若干、カクカクした感じになりますけど、個人的には許容範囲。
そのほかにもブラウザが独自に用意している拡張CSSはたくさんあって、そのへんは下記のリンクなどが参考になります。これでしばらくは楽しめそうです。