html - ボーダー内のCSSボーダー?

Question

ボーダー内で CSS ボーダーを作成することは可能ですか?

これが私がやろうとしていることです:スクリーンショット

余分な html 要素を避け、Retina デバイスのために画像の使用も避けたいと思います。要素の片側だけに CSS アウトラインを配置できれば、ゴールデンになりますが、これは不可能のようです。

編集：

これが、投稿された多くの優れたソリューションから私が最終的に得たものです-ありがとう!

http://jsfiddle.net/kisabelle/9umMr/1/

HTML

<footer>
 <p>Example</p>
</footer>

CSS

footer{
 border-top: 15px solid #393734;
 position: relative;
}

footer:after{
 content:"";
 border-top: 2px #989593 dotted;
 position:absolute;
 top: -8px; 
 left:0;
 width:100%;
 height:0;
}

疑似要素 :after を使用して (box-shadow の代わりに) 2 番目の境界線を追加すると、IE8 以降でのサポートが可能になります。

contentボーダーの代わりに CSS 属性を使用して、点線ボーダーのドット間のスペースを制御できる 2 番目の例については、jsfiddle を参照してください。