左下のボーダーを左下のピクセルの下のボーダーに重ねる方法を教えてください。

Question

は、私は次のCSSスニペットを持っていると仮定します。

div { 
    width: 200px; 
    padding: 10px; 
    border-width: 1px; 
    border-style: solid; 
    border-bottom-color: red; 
    border-left-color: blue; 
} 

左の境界線が青色で、下の境界線が赤色です。しかし、左下のピクセル（左と下の境界線が重なっている部分）は、ブラウザで赤色になります。明らかに、下のボーダーは、そのピクセルの左のボーダーと重なっています。

オーバラップオーダーを手動で設定することも、左下のピクセルが赤ではなく青で着色することもできますか？

Answer 1

左下のピクセルの色はブラウザに属しますが、上書きすることはできません。

ただし、この高度な状況では、ネストされたdivを使用できます。これを試してみてください：

div.parent { 
    width: 200px; 
    border-width: 1px; 
    border-style: solid; 
    border-left-color: blue; 
} 

div.child { 
    width: 200px; 
    padding: 10px; 
    border-width: 1px; 
    border-style: solid; 
    border-bottom-color: red; 
} 

そして、あなたのHTMLは次のとおりです。

<div class="parent"> 
    <div class="child"> 
     Your content will appear correctly. 
    </div> 
</div>