mozilla

border-image-width

Summary

The border-image-width CSS property defines the width of the border. If specified it overrides the border-width property.

  • Initial value 1
  • Applies to all elements, except 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 all lengths made absolute, otherwise as specified
  • Animatable no
  • Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

/* 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;

where:

width
Is a value denoting the width of the image used as a border to apply to all four edges. It is used only in the one-value syntax.
vertical
Is a value denoting the width of the image used as a border to apply to all vertical edges, that is the top and bottom edges. It is used only in the two-value syntax.
horizontal
Is a value denoting the width of the image used as a border to apply to all horizontal edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.
top
Is a value denoting the width of the image used as a border to apply to the top edge. It is used only in the three- and four-value syntaxes.
bottom
Is a value denoting the width of the image used as a border to apply to the bottom edge. It is used only in the three- and four-value syntaxes.
right
Is a value denoting the width of the image used as a border to apply to the right edge. It is used only in the four-value syntax.
left
Is a value denoting the width of the image used as a border to apply to the left edge. It is used only in the four-value syntax.
inherit
Is a keyword indicating that all four values are inherited from their parent's element calculated value.

Values

<length>
Represents the width of the border. It can be an absolute or relative length. This length must not be negative.
<percentage>
Represents the width of the border as a percentage of the element. The percentage 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}

Examples

HTML Content

<!DOCTYPE html>

<html>
   <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>
   </head>
</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 specification

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 15.0 13.0 (13.0) 11 15 6
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 13.0 (13.0) Not supported ? ?

See also