CSS border-image property is used to set an image as an element’s border. It is a shorthand for the below five properties:
The example below sets the image ‘border-diamonds.png’ around the <div> element as a border.
Example:
div{
border-image: url(images/border-diamonds.png) 30 round;
}
Note: If any of the border-image property’s value is omitted, its default value is used.
CSS Syntax
The border-image property has the below syntax:
border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat|initial|inherit;
Property Values
The border-image property accepts the following values:
| border-image-source | Specifies the source/location of the image to be used as border. |
| border-image-slice | Specifies how the image should be sliced. The image is always sliced into 9 sections: 4 corners, 4 edges, and one middle section. |
| border-image-width | Specifies the width of the image border. |
| border-image-outset | Specifies the distance between the element’s border box and the border image. |
| border-image-repeat | Specifies how the sliced image should be tiled and scaled to fill the image border. |
| initial | Sets the border-image property to its default value. |
| inherit | Inherits the border-image property from the parent element. |
General Info
| Default Value | none 100% 1 0 stretch |
| Inherited | No |
| JavaScript Usage | element.style.borderImage = “url(images/border-diamonds.png) 30 round”; |
Related Pages
CSS Tutorial: CSS Borders
