html - 1 つの要素の二重境界線 - 純粋な CSS - ラッピング div なし

Question

1 つの要素のみを使用して次の効果を達成しようとしています。ラッパー div を削除したいと考えています。

http://codepen.io/anon/pen/kdvex

インセットシャドウとボーダーを使用して、目的の効果をほぼ達成しました。しかし、湾曲した境界線は少し間違っているように見えます。青いビットの端を見て、私の言いたいことを理解してください。

http://codepen.io/anon/pen/uLKjl

誰でもこれを改善できますか？それは可能ですか？

Answer 1

2番目の境界線に疑似セレクターを使用するというCadence96の提案のフォローアップ：

http://codepen.io/anon/pen/zdcne

Answer 2

after 疑似要素でボーダーをシミュレートする要素を追加しました。
http://codepen.io/anon/pen/FxemK

.btn.blue {
  z-index:2;
  position:relative
}

.btn.blue:after {content:"."; position: absolute; left:0; top:0; width:99.6%; height: 24px; background:none; z-index:1; border:2px solid white; 
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;}

2番目の答え: http://codepen.io/anon/pen/FxemK

.btn.blue {
  z-index:2;
  position:relative; line-height:100%;
}  



    .btn.blue:after {content:"."; position: absolute; left:0; top:0; 
  width:99.6%; background:none; z-index:1; border:2.2px solid white; 
  line-height:133%; 
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;}