CSS3 Border Image
Use the border-image CSS3 property to create some new and impacting borders.
The first thing to do is create your basic border, this will be filled by your border images or as a fallback for browsers not supporting border-image.
To apply the border-image, we use the CSS
-webkit-border-image: url(borderfile.png) A B type;
- A = slice height
- B = slice width
- type = whether the border is repeated, rounded or stretched (repeat / round / stretch)
CSS 3 Border Image (round)
Using the border-image ’round’, our image will be repeated, scaling/rounding to the height, width and border-width of it’s containing layer.
This pane has been created using the following image and the following CSS 3
- CSS3 Border Image (round)
- #my_CSS3_id {
- border-width:15px;
- -moz-border-image:url(border.png) 30 30 round;
- -webkit-border-image:url(border.png) 30 30 round;
- width:580px; padding:15px 25px; height:inherit;
- }
CSS 3 Border Image (stretch)
Alternatively, we can stretch or repeat the side borders to the length and height of the containing layer – this works best in solid / gradient images.
This pane has been created using the following image and the following CSS 3
- CSS3 Border Image (stretch)
- #my_CSS3_id {
- border-width:15px;
- -moz-border-image:url(border.png) 30 30 stretch ;
- -webkit-border-image:url(border.png) 30 30 stretch;
- width:580px; padding:15px 25px; height:inherit;
- }
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
Looks awesome, but it’s not going to work in IE. Fancy stuff like this never does.
(Tested with IE 6)
Hi, I’m beginning to learn css program. Write your thank you letter will help me a lot of work.
Who cares if it ever works in IE? It’s eye candy for people smart enough to download better browsers. IE sites will function just fine without it.
HI and thanks for this, we are current;y designing vBulletin 4 templates and are trying to implement image borders around the forum sections for that little extra wow factor.. up until seeing your example above we were failing badly, so thanks a lot for posting this tutorial, muchly appreciated. :)
Regards, Darren
I agree with Morgaine, lets move on folks. As long as we dont completely alienate IE 6 users and lose functionality lets embrace new technologies, move on and stop living in the past. So tired of the “but it doesn’t look the same in this browser” – who said it had to?
Not a lot of info about this yet.
It Took about 30mins to find this.
Thanks
PS:
The only thing IE is good for,
is to download a better browser.
Even doing that pains me immensely
Thank you very much for those borders css. They were very helpful.