border-image-width

Свойство border-image-width управляет шириной видимой части рамки, масштабирует ее.

Если это значение больше ширины border-width, картинка рамки заползет под содержимое.

Демо

Если значение этого свойства больше, чем ширина границы элемента, изображение границы будет выходить за пределы края заполнения (и/или содержимого).

Фон

• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• box-shadow

Синтаксис

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

/* <length> value */
border-image-width: 1rem;

/* <percentage> value */
border-image-width: 25%;

/* <number> value */
border-image-width: 3;

/* top and bottom | left and right */
border-image-width: 2em 3em;

/* top | left and right | bottom */
border-image-width: 5% 15% 10%;

/* top | right | bottom | left */
border-image-width: 5% 2em 10% auto;

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

Свойство border-image-width может быть указано с использованием одного, двух, трех или четырех значений, выбранных из списка значений ниже.

• Когда указано одно значение, оно применяет одинаковую ширину ко всем четырем сторонам.
• Когда указаны два значения, первое значение ширины применяется к верху и низу, второе — к левому и правому краю.
• Когда указаны три значения, первое значение ширины применяется к верху, второе — к левому и правому краю, третье — к низу.
• Если указано четыре значения, ширина применяется к верхнему, правому, нижнему и левому краю в указанном порядке (по часовой стрелке).

Значения

<length-percentage>

Ширина границы в виде <length> или <percentage>. Проценты относятся к ширине области изображения границы для горизонтальных смещений и высоте области изображения рамки для смещений по вертикали. Не должен быть отрицательным.

<number>

Ширина границы в виде кратного соответствующей ширины границы. Не должен быть отрицательным.

auto

Ширина границы делается равной внутренней ширине или высоте (в зависимости от того, что применимо) соответствующего фрагмента изображения границы. Если изображение не имеет требуемого внутреннего размера, вместо него используется соответствующая ширина границы.

Значение по-умолчанию:

border-image-width: 1;

Спецификации

• CSS Backgrounds and Borders Module Level 3

Поддержка браузерами

Can I Use border-image? Data on support for the border-image feature across the major browsers from caniuse.com.

Комментарии