html - ボーダーの角のベベル効果を取り除く

Question

複数の境界線の色を持つ要素がページに存在する場合、これらの色が交わる角はデフォルトでベベルを作成します。これは、border-corner スタイルの奇妙な選択のように思えます。代わりに、代わりに直線が表示されるように、境界線の1つが他の境界線を「圧倒」することをお勧めします。

この効果を説明するために、次のことを考慮してください。

ここで作成した jsFiddle の例を参照してください。

上の 2 つの項目は、デフォルトのベベル動作を示しています。下の 2 つは、望ましい、期待される動作を示しています。この場合、border-top は、border-left と border-right の角を「圧倒」または「上書き」します。

トップケースのマークアップ:

<div class="container">
    <div class="border">Item one</div>
    <div class="border">Item two</div>
</div>

そしてCSS：

.container {
    margin: 5px;
    width: 150px;
    background: yellow;
}
.border {
    padding: 5px;
    border: 15px solid red;
    border-top: 15px solid teal;
}

下のケースのマークアップ:

<div class="container">
    <div class="border-top"></div>
    <div class="border-reg">Item one</div>
    <div class="border-top"></div>
    <div class="border-reg">Item two</div>
</div>

そしてCSS：

.border-top {
    border-top: 15px solid teal;
}
.border-reg {
    border: 15px solid red;
    border-top: 0;
    padding: 5px;
}

私が考案した 2 番目の方法は、私が望む効果を生み出しますが、デフォルトの状態であると想定していたものにとって、これは不必要に退屈なようです。たとえば、border-left で他の境界線をオーバーライドしたい場合は、float: leftインライン要素の狂気に対処する必要があります。

質問（最後に）

すべてのブラウザで観察されるデフォルトのベベル動作を削除する簡単な方法はありますか?

上記で詳しく説明したケースは、border-top または border-bottom がコーナーをオーバーライドするのはほとんど簡単ですが、たとえば、border-left と border-right が border- をオーバーライドする必要がある場合は、それほど簡単ではありません。トップとボーダーボトム。