1px欠けの角丸ボックスをCSSだけで作る方法

角丸なボックスは印象が柔らかくなるので是非とも取得しておきたいテクニック。
webbibo様のサイトで紹介されていたのでここでも紹介したいと思います。
参考にしたページhttp://www.webbibo.com/blog/htmlcss/1pxcorner.html

デモページ

HTMLでの記述

<div class="outer">
    <div class="inner">1px のボックス</div>
</div>

CSSでの記述

ボックスにボーダーを付けない場合

.outer {
    margin: 0px 1px;
    padding: 1px 0px;
    background: #cccccc;
}

.inner {
    margin: 0px -1px;
    background: #cccccc;
}

ボックスにボーダーを付ける場合

.outer {
    margin: 0px 1px;
    background: #eeeeee;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

.inner {
    margin: 0px -1px;
    background: #eeeeee;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
}