Jak pozwolić, aby lewa krawędź zachodziła na dolną granicę w lewym dolnym rogu?

Question

Załóżmy, że mam następujący fragment kodu CSS:

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

Lewa granica jest w kolorze niebieskim, dolna granica jest w kolorze czerwonym. Ale dolny lewy piksel, na którym nakładają się dolna i lewa krawędź, jest czerwony w mojej przeglądarce. Najwyraźniej dolna krawędź zachodzi na lewą ramkę tego piksela.

Czy mogę ręcznie ustawić kolejność nakładania, czy wykonać w inny sposób, że lewy-dolny piksel ma kolor niebieski zamiast czerwonego?

Answer 1

Kolor lewego dolnego piksela należy do przeglądarki, nie można go przesłonić.

Do tej zaawansowanej sytuacji można jednak użyć zagnieżdżonych elementów div. Spróbuj tego:

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

A twój HTML jest:

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