CSS3 Border Color / Colour
Give your borders a more color / colour filled effect with CSS3 using the border-color property.
Using CSS3 border-color, if you have a standard border of X pixels, then you can use up to X colors on that border, each color registering 1 pixel in width. If say you are using a standard border of 10 pixels but only apply 5 or 6 colors, the last color will then be applied to the remaining standard border width.
Cross Brower Compatability
Currently FireFox is the only browser giving support to the CSS3 border-colour so we will only be dealing with the -moz prefix.
All articles in the CSS3 will be updated to show future support & development.
CSS3 Border Color
This is a panel set with a 10 pixel standard border and border-colors
- CSS3 Border Color (Standard Border)
- #my_CSS3_id {
- border: 10px solid #c4c8cc;
- -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;
- }
An example for those on alternative browsers, not seeing the border-colour effect..
CSS3 Border Color (with rounded corners)
This is a panel set with a 10 pixel standard border, border-colors and a border-radius
- CSS3 Border Color (Rounded Corners)
- #my_CSS3_id {
- border: 10px solid #c4c8cc;
- -moz-border-radius: 15px;
- -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A;
- -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;
- }
An example for those on alternative browsers, not seeing the border-colour effect..
The Zen Elements CSS3 Series
- CSS3: Introduction
- CSS3: Border Image
- CSS3: Border Color
- CSS3: Border Radius
- CSS3: Box Shadow
- CSS3: Font Face
- CSS3: Gradients
- CSS3: HSL & HSLA
- CSS3: Multiple Column
- CSS3: Multiple Images
- CSS3: Opacity
- CSS3: RGB & RGBA
- CSS3: Text Shadow
- CSS3: Transform
Thank you for reading!
Alex | @ZenElements
�)
artical is very useful!