CSS3 tutorial (3): border-color web page border color_css3_CSS_web page system

Webjx article introduction: Now let’s take a look at how to add more colors to the border-color of the border. Now let's take a look at how to add more colors to the border-color of the border. The previous article introduced: CSS3 tutorial (2): Web page border radius and web page rounded corners using CSS3 border-r

Now let’s take a look at how to add more colors to the border-color of the border.
Now let’s take a look at how to add more colors to the border-color of the border.
Introduced in the previous article: CSS3 tutorial (2): Web page border radius and web page rounded corners
Use the border-radius property of CSS3. If you set the width of the border to X px, then you can use X on this border colors, each color displays a width of 1px. If your border is 10 pixels wide, but only 5 or 6 colors are declared, the last color will be added to the remaining width. Browser compatibility
Currently only Firefox supports the CSS3 border-colour property, so we only need to use the -moz prefix here.
All articles in this series about CSS3 will be updated in time to track browser compatibility. Border color in CSS3

Here is a standard 10px wide border and border color:
#borderColor { border: 10px solid #dedede; -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00; -moz-border-top-colors: #300 #600 #700 #800 #900 #A00; -moz-border-left-colors: #300 #600 #700 #800 #900 #A00; - moz-border-right-colors: #300 #600 #700 #800 #900 #A00; padding: 15px 25px; height: inherit; width: 590px; }
Browser support:

FireFox (3.0.5)

Google Chrome (1.0.154)

Google Chrome (2.0.156)

Internet Explorer (IE7/IE8 RC1)

Opera (9.6)

Safari (3.2.1, Windows) Border color with rounded corners

-moz-border-top -colors: #303 #404 #606 #808 #909 #A0A; -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-right-colors: #303 # 404 #606 #808 #909 #A0A; padding: 15px 25px; height: inherit; width: 590px; } Browser support:

FireFox (3.0.5)