Question

Suppose I have the following CSS snippet:

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

The left border is blue-colored, the bottom border is red-colored. But the bottom left pixel, where the left and the bottom borders overlap, is red in my browser. Apparently the bottom border overlaps the left border on that pixel.

Can I either manually set the overlap order or accomplish in another way that the left-bottom pixel is blue-colored instead of red-colored?

Answer 1

The color of the bottom-left pixel belongs to your browser, you cannot override it.

However, you can use nested divs for this advanced situation. Try this:

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

And your HTML is:

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