CSS Border Images

❮ PreviousNext ❯

CSS Border Images

With the CSS border-image property, you can set an image to be used as the border around an element.

CSS border-image Property

The CSS border-image property allows you to specify an image to be used instead of the normal border around an element.

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 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.

Note: For border-image to work, the element also needs the border property set!

Here, the middle sections of the image are repeated to create the border:

An image as a border!

Here is the code:

Example

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Try it Yourself »

Here, the middle sections of the image are stretched to create the border:

An image as a border!

Here is the code:

Example

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

Try it Yourself »

Tip: The border-image property is actually a shorthand property for the border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties.

ADVERTISEMENT

CSS border-image – Different Slice Values

Different slice values completely changes the look of the border:

Example 1:

border-image: url(border.png) 50 round;

Example 2:

border-image: url(border.png) 20% round;

Example 3:

border-image: url(border.png) 30% round;

Here is the code:

Example

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

Try it Yourself »

Test Yourself With Exercises

Exercise:

Give the div element an image border. Use the short hand property to define the details of the image border.

<style>
div {
  border: 10px solid transparent;
  : url(border.png) 30 round;
}
</style>

<body>
  <div>This is a div element. It has some text.</div>
</body>

Submit Answer »

Start the Exercise

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

❮ PreviousNext ❯