Marusya's School Notes

Border-Image: Width

The border-image-width property sets the width of the border image. If the border-image-width property is declared, it takes precedence over the border-width, if one is declared. If both are omitted, the value defaults to the border-width default of ‘medium’ (about 3px).

Making the border-image-width the same width as the border-image-slice will create the best looking border image without distortion. If they don't have the same values, then the slice will be stretched (or contracted) to the width of the border-image-width.

Remember the box model! Increasing the border-image-width causes the element to grow larger. This example sets the width of the border images:

HTML file:	Displayed by browser:
<style> #borderimg { border: 10px solid transparent; padding: 15px; border-image-source: url(../html_beg/images/border.png); border-image-repeat: round; border-image-slice: 28; border-image-width: 10px; } #borderimga { border: 10px solid transparent; padding: 15px; border-image-source: url(../html_beg/images/border.png); border-image-repeat: round; border-image-slice: 28; border-image-width: 20px; } #borderimgb { border: 10px solid transparent; padding: 15px; border-image-source: url(../html_beg/images/border.png); border-image-repeat: round; border-image-slice: 28; border-image-width: 30px; } #borderimg1 { border: 10px solid transparent; padding: 15px; border-image-source: url(../html_beg/images/border1.png); border-image-repeat: round; border-image-slice: 35; border-image-width: 10px; } #borderimg1a { border: 10px solid transparent; padding: 15px; border-image-source: url(../html_beg/images/border1.png); border-image-repeat: round; border-image-slice: 35; border-image-width: 20px; } #borderimg1b { border: 10px solid transparent; padding: 15px; border-image-source: url(../html_beg/images/border1.png); border-image-repeat: round; border-image-slice: 35; border-image-width: 30px; } #borderimg2 { border: 10px solid transparent; padding: 15px; border-image-source: url(../html_beg/images/border2.png); border-image-repeat: round; border-image-slice: 8; border-image-width: 10px; } #borderimg2a { border: 10px solid transparent; padding: 15px; border-image-source: url(../html_beg/images/border2.png); border-image-repeat: round; border-image-slice: 8; border-image-width: 20px; } #borderimg2b { border: 10px solid transparent; padding: 15px; border-image-source: url(../html_beg/images/border2.png); border-image-repeat: round; border-image-slice: 8; border-image-width: 30px; } </style> <body> <p>Using this image:</p><img src="../html_beg/images/border.png"> <p>The border-image-width property specifies the width of the border image:</p> <p id="borderimg">border-image-width: 10px;</p> <p id="borderimga">border-image-width: 20px;</p> <p id="borderimgb">border-image-width: 30px;</p> <hr /> <p>Using this image:</p><img src="../html_beg/images/border1.png"> <p>The border-image-width property specifies the width of the border image:</p> <p id="borderimg1">border-image-width: 10px;</p> <p id="borderimg1a">border-image-width: 20px;</p> <p id="borderimg1b">border-image-width: 30px;</p> <hr /> <p>Using this image:</p><img src="../html_beg/images/border2.png"> <p>The border-image-width property specifies the width of the border image:</p> <p id="borderimg2">border-image-width: 10px;</p> <p id="borderimg2a">border-image-width: 20px;</p> <p id="borderimg2b">border-image-width: 30px;</p> </body>	Using this image: The border-image-width property specifies the width of the border image: border-image-width: 10px; border-image-width: 20px; border-image-width: 30px; Using this image: The border-image-width property specifies the width of the border image: border-image-width: 10px; border-image-width: 20px; border-image-width: 30px; Using this image: The border-image-width property specifies the width of the border image: border-image-width: 10px; border-image-width: 20px; border-image-width: 30px;

HTML file:

Displayed by browser:

<body>
Using this image:<img src="../html_beg/images/border.png">
The border-image-width property specifies the width of the border image:
border-image-width: 10px;
border-image-width: 20px;
border-image-width: 30px;
<hr />
Using this image:<img src="../html_beg/images/border1.png">
The border-image-width property specifies the width of the border image:
border-image-width: 10px;
border-image-width: 20px;
border-image-width: 30px;
<hr />
Using this image:<img src="../html_beg/images/border2.png">
The border-image-width property specifies the width of the border image:
border-image-width: 10px;
border-image-width: 20px;
border-image-width: 30px;
</body>

Using this image:

The border-image-width property specifies the width of the border image:

border-image-width: 10px;

border-image-width: 20px;

border-image-width: 30px;

Using this image:

The border-image-width property specifies the width of the border image:

border-image-width: 10px;

border-image-width: 20px;

border-image-width: 30px;

Using this image:

The border-image-width property specifies the width of the border image:

border-image-width: 10px;

border-image-width: 20px;

border-image-width: 30px;

Note: The value of auto is not supported. Therefore, it is often recommended to include border-width as a separate property. Remember that Internet Explorer 10, and earlier versions, do not support the border-image property.