CSS3 Border Color / Colour
Give your borders a more color / colour filled effect with CSS3 using the border-color property.
CSS3 Border Color
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: 25px 0px;
- -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
- CSS3: Transition
Thank you for reading!
Alex | @ZenElements
artical is very useful!
there was some wrong with the second example:
the border-radius code should be: -moz-border-radius: 25px 0px 25px 0px;
@Jayuh – thank you for noticing and pointing out that little mistake – amended!
I am very happy to make this elements in css,
But why its not supporting in Internet Explore??
That’s very handy! Thanks for sharing
Thanks for article.