michael han

CSS 3: border-image property

by Michael Han, 3 years ago
Thu, May 20, 2010 4:16 AM | CSS 3 | 4 comments

This is a simplified shorthand syntax for this property:

border-image: url(/img/posts/border-image.png) h w type;

• h represents the height of the slice
• w represents the width
• type can be stretch, repeat, round, or space
1. stretch - the image is stretched to fill the area
2. repeat - the image is tiled to fill the area
3. round - the image is tiled, and if it does not fill the area with a whole number of tiles, the image is rescaled so that it does.
4. space - the image is tiled, and if it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.

Here is my border base image. It represents the base image for the border that will be make an outline border around the content. It's better to think of it as a background property with enhanced controls for border. It's like a miniature version of the actual border. Preferably, the image should look like a type of frame. The width and the height values determine how much of the image is going to be used for the border and the remaining part of the image is automatically used as the background.

The height of the border is 28 pixels here, but you need to add few more pixels to include the inner curve in the slice. Same goes for the width. 33 and 32 pixels will be used for height and width respectively. The type value also determines the actual shape of the slice from four corners of the image.

border-image-repeat: stretch

This is the HTML 5 format according to W3C, but it isn't fully supported by most of browsers as of today. However, Opera seems to render it correctly, after all, Opera is the most standard compliant browser out there.

border-width: 15px;
border-image: url(/img/border-image.png) 33 32 stretch;
width: 580px;
padding: 15px;

These two lines accommodate for WebKit and Mozilla-based renderers.

-webkit-border-image: url(/img/border-image.png) 33 32 stretch;
-moz-border-image: url(/img/border-image.png) 33 32 stretch;

Normally, the stretch attribute value is used for solid and gradient borders. The round attribute value is used for border image that contains circular shapes.

related properties

border-image-source

Specify an image to use.
border-image-source: url(/img/myborder.png);

border-image-slice

"Represent inward offsets from the top, right, bottom, and left edges of the image respectively, dividing it into nine regions: four corners, four edges and a middle."^[1]
Values: [ <percentage> | <number> ]{1,4} && fill?
Default: 100%

border-image-width

Define "offsets that are used to divide the border image area into nine parts."
Values: [ <length> | <percentage> | <number> | auto ]{1,4}
Default: 1

border-image-outset

Works like margin property by specifying "the amount by which the border image area extends beyond the border box.
Values: [ <length> | <number> ]{1,4}
Default: 0

border-image-repeat

This is the type part of the shorthand syntax aforementioned. It "specifies how the images for the sides and the middle part of the border image are scaled and tiled."
Values: [ stretch | repeat | round ]{1,2}
Default: stretch

¹ ^CSS Backgrounds and Borders Module Level 3. May 20, 2010. <http://www.w3.org/TR/2009/CR-css3-background-20091217/#the-border-image-slice>