CSS 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 used
  1. CSS3 Border Image (round)
  2. #my_CSS3_id {
  3.   border-width:15px;
  4.   border-image:url(border.png) 30 30 round;
  5.   width:580px; padding:15px 25px; height:inherit;
  6. }
 

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 used
  1. CSS3 Border Image (stretch)
  2. #my_CSS3_id {
  3.   border-width:15px;
  4.   border-image:url(border.png) 30 30 stretch ;
  5.   width:580px; padding:15px 25px; height:inherit;
  6. }
 

The Zen Elements CSS3 Series

Thank you for reading!
@zen