Come lasciare che il bordo sinistro si sovrapponga al bordo inferiore del pixel in basso a sinistra?

Question

Supponiamo che io ho il seguente frammento di CSS:

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

Il bordo a sinistra è di colore blu, il bordo inferiore è di colore rosso. Ma il pixel in basso a sinistra, dove i bordi sinistro e inferiore si sovrappongono, è rosso nel mio browser. Apparentemente il bordo inferiore si sovrappone al bordo sinistro di quel pixel.

Posso impostare manualmente l'ordine di sovrapposizione o eseguire in un altro modo che il pixel in basso a sinistra sia di colore blu anziché rosso?

Answer 1

Il colore del pixel in basso a sinistra appartiene al browser, non è possibile sovrascriverlo.

Tuttavia, è possibile utilizzare div nidificati per questa situazione avanzata. Prova questo:

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

E il codice HTML è:

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