The border-image CSS property lets you draw an image in place of an element's border-style.
The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that's your thing) with a single div and a single image. In this article I explain how the border-image shorthand property works in today's browsers.
border-image is a shorthand property that lets you use an image or CSS gradient as the border of an element.
CSS Border image property is used to add image boarder to some elements.you don't need to use any HTML code to call boarder image.A sample syntax of boarder image is as follows −
The CSS border-image property allows you to specify an image to be used instead of the normal border around an element.
The only required property for the border-image shorthand is border-image-source. The other properties default to their initial values if they're not specified. These are the border-image properties in order
The property has three parts:
We will use the following image (called "border.png"):
The border-image property can be applied to any element, except internal table elements (e.g. tr, th, td) when border-collapse is set to collapse.The border-image property takes the image and slices it into nine sections, like a tic-tac-toe board. It then places the corners at the corners, and the middle sections are repeated or stretched as you specify.
Divides the image specified by border-image-source in nine regions: the four corners, the four edges and the middle. It does this by specifying 4 inward offsets.
The border-image-slice property is used to “slice” the image which is to be used as a border image into nine pieces: four corners, four edges, and one center piece.
The CSS border-image-slice property is used for specifying inward offsets from the top, right, bottom, and left edges of the image, dividing it into nine regions: four corners, four edges and a middle.The border-image-slice property is used in conjunction with the border-image-source, border-image-width, border-image-outset, and border-image-repeat properties in order to determine how the image will appear on the border.
Property | Description |
---|---|
border-image | A shorthand property for setting all the border-image-* properties |
border-image-source | Specifies the path to the image to be used as a border |
border-image-slice | Specifies how to slice the border image |
border-image-width | Specifies the widths of the border image |
border-image-outset | Specifies the amount by which the border image area extends beyond the border box |
border-image-repeat | Specifies whether the border image should be repeated, rounded or stretched |