Frame Image: border-image-width

The next property we’ll look at is border-image-width.

The block must have a frame of a certain thickness that is specified using border-width. Then it can be assigned a background image for the frame. The area in which this image will be displayed by default is equal to the width of the frame.

The border-image-width property allows you to control the width of the visible area of the image frame and to scale it. This property does not change the width of the frame itself.

If the value of this property is greater than border-width, the frame image will crawl under the content even if the fill property is not set.

The width of the image frame is set in %, px, em, or other units. The value auto is also possible, where the width depends on the value border-image-slice.

You can specify different width values for the borders. In this case, the values are specified using a syntax that is similar to the one used for margin, padding in the following order: top, right, bottom, and left. For example:

border-image-width: 10px 20px 30px 40px;
border-image-width: 10px 50px;

Let’s try to control the width of the image frame.