SJL Web Design

CCS3: Border Image

The border-image property allows you to create more eye-catching and attractive borders. As an overview, the new property enables you to assign images to line the edges of an element.

How to use the border-image property

Before starting it’s a good idea to create a fallback border for less modern browsers that do not yet support the border-image property.

The syntax is broken down into 4 parts:

A - Image URL eg: url(img/border.png)

B – Slice Height

C – Slice Width

D - Type (repeated, round, stretched)

So all together it would look similar to the following lines of CSS:

-moz-border-image:url(img/border.png) 24 24 round; /*Firefox*/
-webkit-border-image:url(img/border.png) 24 24 round; /*Chrome/Safari*/

Border Image Round

Using the ’round’ option the png image below will be repeated, scaled and rounded to the height, width and border-width properties of it’s containing element in CCS3 supporting browsers.

This border has been created using the PNG and CSS below!

Border Round

#border-image-round {
  border: #dde9d3 12px solid; /*Fallback Border*/
  -moz-border-image:url(img/border.png) 24 24 round; /*Firefox*/
  -webkit-border-image:url(img/border.png) 24 24 round; /*Chrome/Safari*/
  width:460px;
  padding:15px 24px;
  text-align: center;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

Border Image Stretch

The alternative is to stretch or repeat the y-axis of our image to the length and height of the containing element using the ‘stretch’ option in CCS3 supporting browsers.

This border has been created using the PNG below and a few lines of CSS3!

Border Stretch

#border-image-stretch {
  border: #dde9d3 12px solid; /*Fallback Border*/
  -moz-border-image:url(img/border-stretch.png) 24 24 stretch; /*Firefox*/
  -webkit-border-image:url(img/border-stretch.png) 24 24 stretch; /*Chrome/Safari*/
  width:460px;
  padding:15px 24px;
  text-align: center;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

Taking it further

Check out the following two articles to see how you can take the border-image property to the next level:

You can also check which browsers support the border-image property on our CSS3 Browser Support post.

Download supporting files here

Leave a Reply