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
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.