¿Cómo dejar que el borde izquierdo se superponga al borde inferior del píxel inferior izquierdo?

Question

Supongamos que tengo el siguiente fragmento de CSS:

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

El borde izquierdo es de color azul, el borde inferior es de color rojo. Pero el píxel inferior izquierdo, donde los bordes izquierdo e inferior se superponen, está rojo en mi navegador. Aparentemente, el borde inferior se superpone al borde izquierdo de ese píxel.

¿Puedo establecer manualmente el orden de superposición o lograr de otra manera que el píxel inferior izquierdo sea de color azul en lugar de rojo?

Answer 1

El color del píxel inferior izquierdo pertenece a su navegador, no puede anularlo.

Sin embargo, puede usar divs anidados para esta situación avanzada. Prueba esto:

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; 
} 

Y el código HTML es:

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