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

スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。

HTML

下記の通りHTMLを記述します。

 
<div class="outer">  
    <div class="inner">1px rounded corners</div>  
</div>
 

CSS

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

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

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

 
.outer {
    margin: 0px 1px;
    background: #E4F2FF;
    border-top: 1px solid #B1C6D9;
    border-bottom: 1px solid #B1C6D9;
}
 
.inner {
    margin: 0px -1px;
    background: #E4F2FF;
    border-left: 1px solid #B1C6D9;
    border-right: 1px solid #B1C6D9;
}
 

ボックスの幅を指定する場合、外側に新たなボックスを追加して、そこに幅を指定します。

 
<div class="box">  
    <div class="outer">  
        <div class="inner">1px rounded corners</div>  
    </div>
</div>
 

 
.box {
    width: 300px;
}
 

サンプル

1px欠けの角丸サンプル