[CSS]角丸を使用しないで、四隅をすっきりみせるスタイルシート

divで実装したパネルの四隅を1px欠けにして、角をすっきりみせるスタイルシートをonderhond.comから紹介します。

デモのキャプチャ

1px rounded corners/smart faking
demo

仕組みはdivを二つ使用し、paddingとmargin、もしくはmarginとborderで「1px欠け」を実装しています。

HTML

CSS(padding&margin)

CSS(margin&border)

CSS3で簡単に角丸を実装することができますが、このテクニックはIE6でも有効なものとなっています。

sponsors

top of page

©2018 coliss