Understanding CSS Border Image Width

The width of the image file for the border is specified by the CSS border-image-width property.

.container {
  border-style: ridge;
  border-width: 5rem;
  border-image-source: url('path/to/image.jpg');
  border-image-slice: 60; 
  border-image-width: 50%;
  border-image-repeat: repeat; 
}

The border-image-width property is defined in the CSS Backgrounds and Borders Module Level 3 specification.

The property’s description describes its function as “drawing regions,” which is an accurate description of how it creates a border-free area along the outside edge of the element.

Syntax:

border-image-width: [<length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}

border-image-width accepts between one and four values, much like the margin and padding shorthand properties:

• One value: Sets all four sides at the same offset distance
• Two values: Top and bottom side offsets are determined by the first value, while left and right side offsets are determined by the second value.
• Three values: The top side offset is determined by the first value, the right and left side offsets are determined by the second value, and the bottom side offset is determined by the third value.
• Four values: Clockwise, starting with the top side, sets the offset for each side (top, right, bottom, and left, in that order)

/* Keyword value */
border-image-width: auto;

/* Single value */
/* Sets all four sides */
border-image-width: 25%;
border-image-width: 3rem;
border-image-width: auto;

/* Two values */
/* top and bottom | left and right */
border-image-width: 5rem 15%;
border-image-width: auto 2rem;
border-image-width: 3 3rem;

/* Three values */
/* top | left and right | bottom */
border-image-width: 10% 40% 4;
border-image-width: 5 auto 10;
border-image-width: 30% 60% auto;

/* Four values */
/* top | right | bottom | left */
border-image-width: 20 3rem 40% auto;
border-image-width: 2 10rem 10% 40%;
border-image-width: 40 auto 20% auto;

/* Global values */
border-image-width: inherit;
border-image-width: initial;
border-image-width: revert;
border-image-width: revert-layer;
border-image-width: unset;

<length-percentage [0,∞]>

The <length-percentage> value specifies either a length or a percentage value that can be set on the CSS border-image-width property to specify the width and height of the image on the border.

.container{
  /* top and bottom | left and right */
  border-image-width: 3rem 3.5rem;
}

The border’s top and bottom offsets are specified in units of 3rem in the example above, while its left and right offsets are specified in units of 3.5rem.
The width and height of the border picture are expressed as a percentage by the percentage value:

.container {
  border-image-width: 20%;
}

number [0,∞]

An element’s border-width value is represented as a multiple when a unitless, non-negative integer is used as the border-image-width value. Consider the following:

.container {
  border-image-width: 1.5;
  border-width: 1.5rem;
}

Here, the border-image-width value (1.5) is multiplied by the border-width value (1.5rem) to calculate the used width (3rem) of the border image.

Note: That border-image-width draws its border from the element’s border box. It begins drawing the region from the border box and moves inward from there. It is entirely different from how border-width works, which enlarges the container’s border box, increasing the element’s overall size dimensions.

Also read : Detecting CSS Ellipsis in JavaScript and a title

Overlapping Borders

we have a border image with a natural size of 500px square:

.element {
  border-image-source: url("/image-500px.webp");
}

Now suppose that we increase border-image-width so that it is greater than the size of the image:

.element {
  border-image-source: url("/image-500px.webp");
  border-image-width: 2; /* 200px = 100px * 2 */
  border-width: 100px;
}

In a situation like this, the borders would overlap because the width and height offsets add up to 800px.

The formula that the browser uses to determine that is provided in the specification:

f = min(Lwidth/(Wleft + Wright), Lheight/(Wtop + Wbottom))

Where:

Lwidth = width of the border image area (`border-width`)
Lheight = height of the border image area
Wleft = The border image's width offset to the left
Wright = The border image's width offset to the right
Wtop = The border image's width offset to the top
Wbottom = The border image's width offset to the bottom

After calculating f, we check to see whether it is less than 1, and if it is, we multiply the offset values (Wleft, Wright, Wtop, and Wbottom) by f to make it smaller.

Using the values from the aforementioned example as inputs into our equation, we obtain:

f = min(200px/(400px + 400px), 500px/(400px + 400px)) = 0.25

The new offset value, 100px, is obtained by multiplying all of the offsets by 0.25 because f is smaller than 1.