Border-image - CSS Property

Description of the border-image property.

border-image is a shorthand property, which allows you to set all the values for image-border properties in a single rule:

These properties allow you to create a border from an image. In other words, to replace the predefined line style (double, dotted, etc.) with an image. The creative possibilities are endless.

The image that will be used to create the border will be divided into 9 parts: one for each of the four corners, one for each of the four edges, and one for the center. The border-image-slice property defines how the image should be sliced. The nine parts don't necessarily have to be the same size.

border-image-slice also lets you decide whether part number 5 will be applied to the element's background. Otherwise, the element's background stays transparent.

After this slicing, the image parts are resized by border-image to match the border thickness. They can then be repeated or stretched to cover the entire length of the border: see border-image-repeat.

Each of the values assigned to border-image can be set differently for the four sides (except for the source). In that case, the usual CSS rules apply:

Only one value is given: it applies to all four sides of the element.

Two values given: the first applies to the top and bottom sides, the second to the left and right sides.

Three values indicated: they apply according to the diagram above.

Four values are given: each one applies to one side of the element, starting from the top edge and going clockwise.

Border-image don't follow rounded corners. So the border-radius property doesn't work with an border-image.

If both an border-image AND a regular border are set on the same element, CSS priority rules decide which of the two borders will be displayed. Browsers are not supposed to stack both borders. See the tutorial at Priorities.

Exemples de syntaxes.

• border-image: none;

  This value cancels the image border, which makes any simple border on the element reappear.

  border-image:none;
• border-image: source  slice / width / outset  repeat;

  This is the general syntax of border-image: the information must be listed in this order, but only the first three are mandatory.
  You can see that the border thickness (width) and the outward offset (outset) are introduced by a slash character ( / ).

  border-image:url('img/border-image-3.png')
30 / 30px / 0 repeat;
• border-image: url('...') 200 / 15px;

  This syntax defines the image to use, the value to use for its cropping (200 pixels), and the border thickness (15px). The other properties are set to their default values.

  border-image:url('img/border-image-3.png')
30 / 30px;
• border-image: url('...') 20 15 30 12 / 15px 20px;

  Of course, all of these values can be different for each side.
  The syntax above and the example below set four values for slicing the image, and two border thicknesses.

  border-image:url('img/border-image-3.png')
30 40 30 20 / 15px 10px;
• border-image: initial; border-image: inherit; border-image: revert; border-image: revert-layer; border-image: revert-rule; border-image: unset;

  Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, revert-rule, unset.

Examples with the border-image property.

Here are the images used for the examples below:

border-image-1.png
45 x 45 pixels

border-image-2.png
600 x 600 pixels

border-image-3.png
172 x 164 pixels

Browsers compatibility with border-image.

The ability to use an image to create a border is now well supported by browsers. The properties that define this border are also well recognized.

Notes:

(1) Supports the summary property but not detailed properties.
Doesn't support the space and round values

1

Using images
for borders

Estimated overall support.

97%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

1

See Caniuse.com for more compatibility information.

Caniuse

Historic of the border-image property.

• CSS Backgrounds and Borders Module Level 3

  Level 3 of the specification also explains how to position the background relative to the background area, and how to crop it.
  Regarding borders, the concept of image borders is introduced, as well as the ideas of rounded corners and box shadows.

  Regarding border-image Introduction of the border-image shorthand property to define the characteristics of new borders made with images.
  

  August 02, 2002

  Working Draft.

  

  December 17, 2009

  Candidate Recommendation.

  

  

See also, about borders.

The specification of W3C "CSS Backgrounds and Borders Module" brings together everything related to borders and backgrounds. The border-image property is described in this standard, along with the following:

Properties: