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

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

1px rounded corners/smart faking
demo

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

HTML

<div class="outer">
<div class="inner">box</div>
</div>

CSS(padding&margin)

.example1 .outer {background:#0cc; margin:0px 1px; padding:1px 0px;}
.example1 .inner {background:#0cc; margin:0 -1px;}

CSS(margin&border)

.example2 .outer {background:#0cc; margin:0px 1px; border:1px solid #0cc; border-left-width:0; border-right-width:0;}
.example2 .inner {background:#cc0; margin:0 -1px; border:1px solid #0cc; border-top-width:0; border-bottom-width:0;}

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

Post on:2009年10月9日