Color of corner when adjacent sides are different colors

HTML & CSS
1

I have a simple div with the following CSS styles:

div.myStyle{
    border-width:1px;
    border-style:solid;
    border-color:red blue;
    width:5px;
    height:5px;
}

This makes a box like the one in the images attached to this post.

In the WebKit version, the color of the vertical side “takes precedence” over the color of the horizontal side at corners, making the corners blue, not purple or red. In the Mozilla version, the color of the horizontal side takes precedence on top, and the vertical sides take precedence on bottom. (Opera exhibits the same behavior as Mozilla.)

My question is this: Is there a way to specify the color of the corners when the sides are different colors? For example, would it be possible to specify that all four corners should be red, or that the top-left corner should be green while the rest are orange?

2

Hi,

No you can’t specify how the corners are joined as that is up to the browser.

At 1px my eyes can’t tell the difference anyway :slight_smile:

At 4px and above both browsers will mitre the corners and they then become exactly the same in both.


div{
    border-width:4px;
    border-style:solid;
    border-color:red blue;
    width:50px;
    height:50px;
}