W3docs
en
Log in

CSS border-image Property

The CSS shorthand border-image property allows specifying an image as the border around an element. See examples and try them yourself.

The shorthand border-image property allows specifying an image as the border around an element.

The border-image property is one of the CSS3 properties.

This shorthand property combines several individual border-image properties. Omitted values default to their initial values. See notes for each sub-property below:

  • border-image-source - If the value is "none", or if the image cannot be displayed, the border styles will be used.
  • border-image-slice - The middle part of the image is treated as fully transparent, unless the "fill" value is set.
  • border-image-width - If this property's value is greater than the element's border-width, the border image will extend beyond the padding (and/or content) edge. You also need to know that this property may be specified using one, two, three, or four values.
  • border-image-outset - It may be specified using one, two, three, or four values too.
  • border-image-repeat - It can be specified by two values. If the second value is omitted, it is assumed to be the same as the first. And when we set only one value, it applies the same behavior on all four sides, if we set two values, the first applies to the top and bottom, the second to the left and right.
PropertyValue
Initial Valuenone 100% 1 0 stretch
Applies toAll elements, except internal table elements when border-collapse is "collapse". It also applies to ::first-letter.
InheritedNo
AnimatableNo
VersionCSS3
DOM Syntaxobject.style.borderImage = "url(border.png) 30 round"

Syntax

Syntax of CSS border-image Property

border-image: source slice width outset repeat | initial | inherit;

Example of the border-image property:

Example of CSS border-image Property

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border">border-image: 10% round;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>
Try it Yourself »

Result

SS border-image Property

Example of the border-image property with multiple values:

Example of CSS border-image Property with different values

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 30%;
        border-image-repeat: repeat;
        border-image-width: 15px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 20%;
        border-image-repeat: round;
        border-image-width: 10px;
      }
      .border3 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 15%;
        border-image-repeat: space;
        border-image-width: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image example with all values.</h2>
    <p class="border">border-image: 30% 15px repeat</p>
    <p class="border2">border-image: 20% 10px round;</p>
    <p class="border3">border-image: 15% 20px space;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
border-image-sourceSpecifies the source image that is used to create border image. This can be a URL, data URI, CSS gradient, or inline SVG.
border-image-sliceSpecifies how to slice the image specified by border-image-source. The image is always sliced into nine sections: four corners, four edges and the middle.Play it »
border-image-widthSpecifies the width of the border image.
border-image-repeatSpecifies if the border image is repeated, rounded or stretched.Play it »
initialSets the property to its default value.
inheritInherits the property from its parent element.

Practice

Practice

What is true about the CSS border-image property according to the content on the specified URL?