Yes, we know: we can set the width of the border. The width of the border can be 5px, 10px, 20px, or any value.
However, have you ever imagined that you can set a separate color for each 1px border? What is this concept? That is to say, if you set a 10px border for an element, then you can set 10 colors for this 10px border area. Each 1px is a layer (group). DEMO: Detailed explanation of multiple sets of border colors in css3 border-colors
Well, let's review how to set the border size for elements (code block 1):
The above code indicates that we have defined a 6px border for a div element with className test. Of course, this is a rectangle with 4 sides.
Therefore, this CSS code can actually be refined into (code block 2):
Through the refined code, we found that we can actually set colors for the four sides of the rectangle. As for whether the colors should be set to the same or different, it depends on your own needs.
When you run the refined code (of course you can change the color of each side), you see a rectangle with a 6px black border. Well, this is what we expect.
However, now, we can split the 6px border into 6 groups, each 1px is one group, so each border can be set to up to 6 different colors.
How to do it? Take a look (code block three):
.test{
border-width:6px;
border-style:solid;
border-top-colors:#000 #fff #999 #aaa #ccc #eee;
border-right-colors:#000 #fff #999 #aaa #ccc #eee;
border-bottom-colors:#000 #fff #999 #aaa #ccc #eee;
border-left-colors:#000 #fff #999 #aaa #ccc #eee;
}
.test{
border-width:6px;
border-style:solid;
border-top-color:#000;
border-right-color:#000;
border-bottom-color:#000;
border-left-color:#000;
}
.test{
border:6px solid #000;
}
<div class="test">Test border color settings</div>