HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

CSS Border Images

❮ Previous Next ❯

CSS Border Images

You can use an image as a border around an element by using the CSS property called border-image.

CSS border-image Property

You can use the "border-image" CSS property to choose an image to replace the regular border of 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 this picture, named "border.png":

Border

The border-image property works like this: it takes an image and splits it into nine sections, similar to a tic-tac-toe board. After that, it positions the image's corners at the corners of an element, and the sections in the middle can be copied or stretched as required.

Note: To ensure that "border-image" works correctly, you need to also specify the "border" property for the element!

In this case, we duplicate the central parts of the picture to form the border.

Here is the code:

Example

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

In this situation, we're taking the middle section of the image and making it larger to create the outer frame.

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.

CSS border-image - Different Slice Values

Adjusting the slice values will completely change how the border looks.

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 »

CSS Border Image Properties

Property Description
border-image A shortcut for adjusting various border-image properties at once.
border-image-source Specifies the location of the image that will serve as a border.
border-image-slice Describes the method for cutting the border image.
border-image-width Specifies the dimensions of the border image.
border-image-outset Defines how much the border image area goes beyond the border box.
border-image-repeat Indicates how the border image should be handled: whether it should repeat, have rounded corners, or be stretched.
❮ Previous Next ❯