CSSだけで括弧でくくっているようなボックスを作る

CSSだけで、括弧でくくっているようなボックスを作ります。
表示サンプルはこちら。

CSS

.box{
    width:10em;
    padding:.5em 1.5em;
    position:relative;
    background-color:#FFF;
    margin:20px auto;
}
.box:before,
.box:after{
    content: "";
    position: absolute;
    top: -2px;
    bottom:-2px;
    width: 10px;
    border: 2px solid #CCC;
    z-index:1;
}
.box:before{
    left: -2px;
    border-right:none;
    border-radius:4px 0 0 4px;
}
.box:after{
    right: -2px;
    border-left:none;
    border-radius:0 4px 4px 0;
}

HTML

<div class="box">テキストを括弧でくくる。テキストを括弧でくくる。テキストを括弧でくくる。</div>

参考：How can I erase a border piece using CSS?