CSS Border Images

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

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:

  1. The image to use as the border
  2. Where to slice the image
  3. Define whether the middle sections should be repeated or stretched

We will use the following image (called "border.png"):

Border

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.

Example -

CSS border-image - Different Slice Values

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.

CSS Border Image Properties

PropertyDescription
border-imageA shorthand property for setting all the border-image-* properties
border-image-sourceSpecifies the path to the image to be used as a border
border-image-sliceSpecifies how to slice the border image
border-image-widthSpecifies the widths of the border image
border-image-outsetSpecifies the amount by which the border image area extends beyond the border box
border-image-repeatSpecifies whether the border image should be repeated, rounded or stretched