CSS3 Border Image

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 used

  1. CSS3 Border Image (round)
  2. #my_CSS3_id {
  3.   border-width:15px;
  4.   -moz-border-image:url(border.png) 30 30 round;
  5.   -webkit-border-image:url(border.png) 30 30 round;
  6.   width:580px; padding:15px 25px; height:inherit;
  7. }
 

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.   -moz-border-image:url(border.png) 30 30 stretch ;
  5.   -webkit-border-image:url(border.png) 30 30 stretch;
  6.   width:580px; padding:15px 25px; height:inherit;
  7. }
 

The Zen Elements CSS3 Series

Thank you for reading!
Alex | @ZenElements

Like this article?

Subscribe to our rss, follow our tweets or please help us spread the work & share this with your friends!

Thank you for all your support; have a cookie!

2 Comments on “CSS3 Border Image”

  1. Martin 14.04.2010 at 8:21 am

    Looks awesome, but it’s not going to work in IE. Fancy stuff like this never does.

    (Tested with IE 6)

  2. rehabilitasyon 11.07.2010 at 3:52 pm

    Hi, I’m beginning to learn css program. Write your thank you letter will help me a lot of work.

 

Leave a Reply

(required; who are you?)

(required; we'll keep it safe!)

(optional; promote your site!)