Export (0) Print
Expand All

border-image-width property

Specifies the width/height of the border image by defining inward offsets from the edges of the border image area.

CSS Backgrounds and Borders Module Level 3, Section 6IE11

 

Syntax

border-image-width: [ <length> | <percentage> | <number> | auto ] {1,4}

Property values

length

Distance in absolute or relative units of inward offset.

percentage

Relative to the size of the image area: the width of the area for horizontal offsets, the height of the area for vertical offsets.

number

Represents a multiple of the computed value of border-width, or the width of the border box.

auto

Specifies that the border image width is the intrinsic width, or height, of the corresponding image slice.

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Value1

Standards information

Remarks

By default, the nine parts of the border image are scaled to fit within the nine corresponding regions of the element's border, as specified by border-width. When four values of border-image-width are specified, they set the offsets on the top, right, bottom, and left sides in that order. If the left is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top.

Negative values are not allowed for border-image-width.

If the offsets of two opposite border-image-width are large enough that they will overlap, the border-image-width values are proportionally reduced so there is no overlap.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-border-width" as an alias for this property.

Examples

border-image-width has a default value of one. This means the border-image-width is one multiple of the computed value of border-width, or the width of the border box. In these examples, the three elements use the same values for border-image-source and border-image-slice.

The example below shows a div element with a default border-image-width of 1 giving its border image a 15px width, (1 x the border-width value of 15px).

An HTML element with border-image-width set to 1.


#box {
   border: solid 15px;
   border-image-source: url("border.png");
   border-image-slice: 30;
}

This example sets border-image-width to 10, 20, 30, and 40 pixels. When a pixel value is used, it specifies how many pixels from the edges of the border image area to draw the border image.

An HTML element with pixel values set for border-image-width.


#box {
   border: solid 15px;
   border-image-source: url("border.png");
   border-image-slice: 30;
   border-image-width: 10px 20px 30px 40px;
}

Instead of specifying pixel values, border-image-width can be specified as a percentage of the border image area. The following example shows an HTML element with border-image-width set to 25%.

An HTML element using percentage values for border-image-width.


#box {
   border: solid 15px;
   border-image-source: url("border.png");
   border-image-slice: 30;
   border-image-width: 25%;
}

See also

CSSStyleDeclaration
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source

 

 

Show:
© 2014 Microsoft