{"id":19812,"date":"2013-01-09T15:13:10","date_gmt":"2013-01-09T22:13:10","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=19812"},"modified":"2022-12-05T13:28:20","modified_gmt":"2022-12-05T21:28:20","slug":"border-image","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image\/","title":{"rendered":"border-image"},"content":{"rendered":"\n

border-image<\/code> is a shorthand property that lets you use an image or CSS gradient as the border of an element.<\/p>\n\n\n\n

The border-image<\/code> property can be applied to any element, except internal table elements (e.g. tr, th, td) when border-collapse<\/code> is set to collapse<\/code>.<\/p>\n\n\n\n\n\n\n\n

.element {\n  border-image: url(border.png) 25 25 round;\n}<\/code><\/pre>\n\n\n
Syntax<\/h3>\n\n\n
border-image: <'border-image-source'> || <'border-image-slice'> [ \/ <'border-image-width'> | \/ <'border-image-width'>? \/ <'border-image-outset'> ]? || <'border-image-repeat'><\/code><\/pre>\n\n\n
Properties<\/h3>\n\n\n
The only required property for the border-image<\/code> shorthand is border-image-source<\/code>. The other properties default to their initial values if they’re not specified. These are the border-image<\/code> properties in order:<\/p>\n\n\n
border-image-source<\/code><\/h4>\n\n\n
.element {\n  border-image-source: url(border.png);\n}<\/code><\/pre>\n\n\n\n
This property specifies the source for the border image. This can be a URL, data URI, CSS gradient, or inline SVG (though support is limited for inline SVG, see SVG usage notes<\/a>).<\/p>\n\n\n\n
The initial value is none<\/code>.<\/p>\n\n\n
border-image-slice<\/code><\/h4>\n\n\n
.element {\n  border-image-source: url(border.png);\n  border-image-slice: 20;\n}<\/code><\/pre>\n\n\n\n
The values of this property tell the browser where to \u201cslice\u201d the image to create the pieces of the border. The image is divided into 9 sections \u2014 the four corners, the four sides, and the center.<\/p>\n\n\n\n
\"\"
Border image with slice lines marked in red (enlarged to show detail).<\/figcaption><\/figure>\n\n\n\n
The property accepts up to four positive unitless numbers or percentages, and an optional fill<\/code> keyword. The initial value is 100%<\/code>.<\/p>\n\n\n\n
Unitless numbers measure the slice by pixels on a raster image, and by coordinates on an SVG. A percentage value is relative to the size of the image. For example, on a raster image that is 100px x 100px, 10%<\/code> from any side of the image is 10px. See the usage notes on SVG<\/a> for more information about how percentages work on SVG images.<\/p>\n\n\n\n
The values measure from the top, right, bottom, and left edges of the image (in that order). If one value is missing, its value defaults to the value of its opposite side \u2014 for example if the left value is missing, but the right value is set at 10px, the left value becomes 10px too.<\/p>\n\n\n\n
By default, the center of the source image is discarded. But, when the fill<\/code> keyword is used, it’s applied to the background of the bordered element instead.<\/p>\n\n\n
border-image-width<\/code><\/h4>\n\n\n
.element {\n  border-image-source: url(border.png);\n  border-image-slice: 20;\n  border-image-width: 20;\n}<\/code><\/pre>\n\n\n\n
This property sets the width of the border image. It accepts a percentage value, a positive unitless number, or the keyword auto<\/code>.<\/p>\n\n\n\n
The values are for the top, right, bottom, and left sides of the element (in that order). If one value is missing, it is drawn the same as its opposite value.<\/p>\n\n\n\n
For this property, percentage values are relative to the size of the border image area, while a unitless number is multiplied with the border-width<\/code>.<\/p>\n\n\n\n
The initial value is 1<\/code>, so if this value is not set but there’s a border<\/code> or border-width<\/code> declaration for the element, the border image will be drawn at that width.<\/p>\n\n\n\n
The auto<\/code> keyword tells the browser to use either the size of the border-image-slice<\/code> if available, or the size of the border-width<\/code>.<\/p>\n\n\n
border-image-outset<\/code><\/h4>\n\n\n
.element {\n  border-image-source: url(border.png);\n  border-image-slice: 20;\n  border-image-width: 20;\n  border-image-outset: 1;\n}<\/code><\/pre>\n\n\n\n
The value for this property specifies how far the border image area extends past the border box. The initial value is 0<\/code>. The property accepts up to four positive length values<\/a> or unitless numbers. Length values are absolute measurements, while a unitless number is multiplied with the border width to compute the outset value, similar to how unitless numbers work for border-image-width<\/code>.<\/p>\n\n\n
border-image-repeat<\/code><\/h4>\n\n\n
.element {\n  border-image-source: url(border.png);\n  border-image-slice: 20;\n  border-image-width: 20;\n  border-image-outset: 1;\n  border-image-repeat: round;\n}<\/code><\/pre>\n\n\n\n
This property controls how the image is repeated to fill the area of the border.<\/p>\n\n\n\n
You can specify up to two values for this property. If one value is specified, it’s applied to both the horizontal and vertical sides of the border. If two are specified, the first is applied to the horizontal sides and the second is applied to the vertical sides.<\/p>\n\n\n
Values<\/h5>\n\n\n
  • stretch<\/code>: the initial value. The border image is stretched as needed to fill the area.<\/li>
  • repeat<\/code>: the image tiles to fill the area, dividing tiles if necessary.<\/li>
  • round<\/code>: the image tiles to fill the area, and is rescaled if necessary to avoid dividing tiles.<\/li>
  • space<\/code>: the image tiles to fill the area. If the area can’t be filled with whole tiles, space is inserted around the tiles for an even fit. Note: this value is not implemented by any browser yet.<\/li><\/ul>\n\n\n\n
    Try out the different border-image-repeat<\/code> values in this demo (space<\/code> is included for future compatibility only; it doesn’t work as specified in any browser yet):<\/p>\n\n\n\n