RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/border-image-width below:

border-image-width · WebPlatform Docs

border-image-width Summary

The border-image-width CSS property defines the offset to use for dividing the border image in nine parts, the top-left corner, central top edge, top-right-corner, central right edge, bottom-right corner, central bottom edge, bottom-left corner, and central right edge. They represent inward distance from the top, right, bottom, and left edges.

Overview table

Initial value: none
Applies to: all elements, except internal table elements when border-collapse is set to collapse.
Inherited: No
Media: visual
Computed value: all length made absolute, or as specified
Animatable: No
CSS Object Model Property: borderImageWidth
Percentages: Relative to the width, for horizontal effects, or the height, for vertical effects, of the border image area.

Syntax

border-image-width: <length>
border-image-width: <number>
border-image-width: <percentage>
border-image-width: auto

Values

<length>: Represents the length of the image slice. It can be an absolute or relative length. This length must not be negative.
<percentage>: Represents the percentage of the image slice relative to the height, or width, of the border image area. 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 image slice size. The number must not be negative.
auto: Indicates that the width, or height, of the image size must be the intrinsic size of that dimension.

Examples

A simple example showing multiple <div>s, identical in style except that they have different border-image-width properties applied to them.

<div class="pattern one">one</div>
<div class="pattern two">two</div>
<div class="pattern three">three</div>
<div class="pattern four">four</div>

View live example


.pattern {
    border-image-source: url(/docs/w/images/d/d8/border-image.png);
    border-image-slice: 30;
    border-image-repeat: repeat;
    border-image-outset: 3;
}


.pattern.one{
    border-image-width: 3;
}


.pattern.two{
    border-image-width: 1.2em 1.8em;
}


.pattern.three{
    border-image-width: 5% 15% 10%;
}


.pattern.four{
    border-image-width: 5% 2em 10% auto;
}

View live example

Usage

 * Up to four different widths can be specified, in the following order: top, right, bottom, left.

If one width is specified, it is used for all four sides. If two widths are specified, the first is used for the top and bottom borders, and the second is used for left and right borders. If three widths are specified, they are used for top, right/left, and bottom borders, respectively. If left is missing, it is the same as right; if bottom is missing, it is the same as top; if right is missing, it is the same as top.

Related specifications

CSS Level 3 - Backgrounds and Borders Module: W3C Candidate Recommendation