The CSS 3 ‘Border Image’ Rule

Posted on November 13, 2010

This is my second post on the ‘CSS 3 Rules’ series, and it’s again on how to style borders using CSS 3. Only this time, we are going to see how to style borders using an image instead of using colors.

That’s right… CSS 3 allows us to use an image instead of a bunch of colored pixels (lets assume an image is not a bunch of colored pixels!) to style borders. Now you can make the borders of your objects look exactly how you want them to.

For Mozilla Firefox and for Webkit based browsers like Safari and Google Chrome, the CSS declaration looks something like this:

1
2
3
4

div {
  -moz-border-image:url(border.png) 30 30 30 30 repeat;
  -webkit-border-image:url(border.png) 30 30 30 30 repeat;
}

Below you can find what those values mean (from left to right):

• url(border.png) is the path to the image that you want to use to style the border;
• 30 is the distance of the slice from the top of the image;
• 30 is the distance of the slice from the right of the image;
• 30 is the distance of the slice from the bottom of the image;
• 30 is the distance of the slice from the left of the image;
• round is the type.

Note: The distance of the slice can be measured in pixels or in percentage. For percentage you have to put the ‘%’ symbol after the value. For pixels you put nothing after the value.
Note 2: The type of the border image can be ‘repeat’, ’round’ or ‘stretch’.

Compatibility Table

4	5	3	3.6	10	10.5	4	7	8	9

Usage

I’ve just made a simple image to use at the examples below. This is the image that I am going to use in both examples.

Using ‘Stretch’

1
2
3
4
5
6
7

div {
	border-width:16px;
	-moz-border-image:url(border-image.png) 16 16 16 16 stretch;
	-webkit-border-image:url(border-image.png) 16 16 16 16 stretch;
	width:380px;
	height:150px;
}

Using ‘Repeat’

1
2
3
4
5
6
7

div {
	border-width:16px;
	-moz-border-image:url(border-image.png) 16 16 16 16 repeat;
	-webkit-border-image:url(border-image.png) 16 16 16 16 repeat;
	width:380px;
	height:150px;
}

Example

This is what the first code above, using ‘Stretch’ does.

This is what the second code above, using ‘Repeat’ does.

Don’t forget to check out these other ‘CSS 3 Rules’ posts:

1. The CSS 3 ‘Border Colors’ Rule
2. The CSS 3 ‘Border Image’ Rule
3. The CSS 3 ‘Border Radius’ Rule

• A Regra ‘Border Image’ em CSS 3 (Versão PT)

This entry was posted in CSS and tagged css3, web design. Bookmark the permalink.