CSS Property border-image-width

The border-image-width property is employed to scale the border-image slices created by the border-image-slice property.

The border image breadth can tell the browser however wide every border aspect is so it will scale the border image to suit in it.

The space within that the border image is to be painted is named the border image area. By default, the boundaries of the border image space correspond to the boundaries of the element’s border box. (However, the boundaries of the border image space is extended exploitation the border-image-outset property.)

The border-image-width is such as an inventory of offsets from the boundaries of the border image space.

The border-image-width property will take four, three, two, or one offset values.

When four values area unit such, they set the offsets on the highest, right, bottom and left sides in this order. If 3 values area unit such, the primary one specifies the highest offset, the second specifies the proper and left offsets, and also the third one specifies all-time low offset. If 2 values area unit such, the primary one specifies the highest and bottom offsets, and also the second specifies the proper and left offsets. If one worth is such, it specifies all the four offsets.

If 2 opposite border-image-width offsets area unit massive enough that they overlap, then the used values of all border-image-width offsets area unit proportionately reduced till they not overlap.

The offsets such by the border-image-width property area unit then accustomed scale the slices of the border image obtained from the border-image-slice property.

The top and bottom edge (Edge one and Edge 3) area unit scaled so their height matches the highest and bottom offsets of the border-image-width, and their breadth is scaled proportionately. the proper and left edges (Edge two and Edge 4) area unit scaled so their breadth matches that such by the proper and left offsets of the border-image-width, and their height is scaled proportionately.

The breadth of the highest and bottom edges, and also the height of the proper and left edges then rescaled during a next step supported the worth of the border-image-repeat property.
You can scan a lot of regarding however these properties work along within the border-image shorthand property entry.

The height and breadth of the border image corners (corners one through four within the higher than image) is set by scaling the corners to the offsets of the sides that they’re a part of. as an example, the highest right corner slice, are going to be scaled so its breadth matches the proper offset of the border-image-width and its height matches the highest offset provided by the border-image-width property.

As for the center slice of the border image, is it either discarded or preserved, reckoning on whether or not the fill worth is gift within the border-image-slice property. If it’s preserved, its breadth is scaled by constant issue because the prime image edge unless that issue is zero or eternity, within which case the scaling issue of all-time low is substituted, and failing that, the breadth isn’t scaled. the peak of the center image is scaled by constant issue because the left image edge unless that issue is zero or eternity, within which case the scaling issue of the proper image is substituted, and failing that, the peak isn’t scaled.

CSS Property border-image-width Value

  • <length>
  • <percentage>
  • <number>
  • auto

<length>

See the <length> entry for a list of possible values.

<percentage>

Percentages refer to the size of the border image area: the width of the area for horizontal offsets, the height for vertical offsets.

<number>

A <number> value represents multiples of the corresponding computed border-width of the element.

auto

If auto is specified then the border image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice (see border-image-slice). If the image does not have the required intrinsic dimension then the corresponding border-width is used instead.

Desktop Browser Support

Mobile Browser Support

Examples

border-image-width: 30px; /* one-value syntax, all offsets will be equal to 30px */
border-image-width: 10% 30%; /* two-value syntax, top and bottom offsets = 10%, right and left offsets = 20% */
border-image-width: auto; /* specify offset based on the slice intrinsic width */
border-image-width: auto 30px; 
border-image-width: 10px 20px 30px 25px;
border-image-width: 4; /* border image width is 4 times the width of the border specified using the boder-width property */

2 Comments

  1. Nice

  2. Exceptional post but I was wondering if you could write a litte more on this topic? I’d be very thankful if you could elaborate a little bit more. Thank you!

Leave a Reply