Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
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.
- index.html
- style.css
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Comments