Well, Nifty technogy is used. There are small stripes appending inside of an element which create an illusion of transcorn.

CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』。
mootoolsをフレームワークとして使用しています。

次のように、左下の大きな角丸や、右上の一部切り取ったような角も簡単に実現できます。
大きな角丸を作るには、radiusというプロパティを大きく指定することで実現できます。



このような複雑な形を、次のようにたったの2行で実現できるから驚きです（あらかじめ、mootoolsのopt.jsとTranscorners.jsを読み込む必要アリ）。

$('content').makeRounded('top right', {radius: 10, transition: fx.linear, borderColor: "#555"});
$('content').makeRounded('bottom left', {radius: 100});
// ↑このコードで id="content" の要素が上記画像のような形になります。

その他、サンプルいくつか。こんな感じのボックス要素が簡単に作れます。



これは便利ですね。

関連エントリ

• CSSとJavaScriptで影付きの角丸ボックス要素を作る
• Javascriptで動的にアンチエイリアスな角丸を設定する
• アンチエイリアスがかかったCSS角丸を作るWEBツール