border-image-width

In This Article

The border-image-width CSS property defines the width of the border image by defining inward offsets from the border edges. If the border-image-width is greater than the border-width, then the border image extends beyond the padding (and/or content) edge.

/* border-image-width: all */
border-image-width: 3;
/* border-image-width: vertical horizontal */
border-image-width: 2em 3em;
/* border-image-width: top horizontal bottom */
border-image-width: 5% 15% 10%;
/* border-image-width: top right bottom left */
border-image-width: 5% 2em 10% auto;
/* Global values */
border-image-width: inherit;
border-image-width: initial;
border-image-width: unset;

Initial value	`1`
Applies to	all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`.
Inherited	no
Percentages	refer to the width or height of the border image area
Media	visual
Computed value	as specified, but with relative lengths converted into absolute lengths
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

This property may take one, two, three, or four values. Each value can be a length, a percentage, or the keyword auto.

With one value:

the value denotes the width of the image used as a border to apply to all four edges.

With two values:

the values specify vertical and horizontal widths respectively.

With three values:

the values specify top, horizontal, and bottom widths respectively.

With four values:

the values specify top, right, bottom, left widths respectively.

The inherit keyword can also be used, to indicate that all four values are inherited from their parent's element calculated value.

Values

<length-percentage>: Represents the width of the border. It can be an absolute or relative length. Percentages refer to the width of the border image area for horizontal offsets and the height of the border image area for vertical offsets. This length must not be negative.
<number>: Represents a multiple of the computed value of the element's border-width property to be used as the border width. The number must not be negative.
auto: Causes the border image width to equal the intrinsic width or height (whichever is applicable) of the corresponding border-image-slice. If the image does not have the required intrinsic dimension then the corresponding computed border-width is used instead.

Formal syntax

[ <length-percentage> | <number> | auto ]{1,4}where 
<length-percentage> = <length> | <percentage>

Examples

HTML Content

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
      no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
   </body>
</html>

CSS Content

p {
   border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
   border-image-slice: 30;
   border-image-width: 20px;
   border-image-repeat: round;
   padding: 40px;
}

Specifications

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3 The definition of 'border-image-width' in that specification.	Candidate Recommendation	Initial definition

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	15.0	(Yes)	13.0 (13.0)	11	15	6

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	13.0 (13.0)	No support	?	?

Document Tags and Contributors

Tags:

Contributors to this page: wbamberg, elysdir1, erikadoyle, Sebastianz, mdrburke, fscholz, kocsisbalintpeter, chrisdavidmills, 1ojas, jsx, m_patzer66, teoli, Aydin-, RufusCSharma, TimwiTerby, Saluev, LouisLazaris, kscarfone, dalgard, Sheppy, ethertank, hydrurga, trevorh, brianloveswords

Last updated by: wbamberg, Jun 12, 2017, 9:55:55 PM