CSS свойство border-image-width

Определение и применение

CSS свойство border-image-width задает ширину границы-изображения путем определения смещения (внутрь элемента от края границы).

Для предсказуемого результата задайте ширину границы и border-style: solid; это также обеспечит обычную границу, если изображение не загрузится.

Для свойства border-image-width можно указать от одного до четырех значений (top, right, bottom и left). Порядок указания значений можно запомнить, традиционно используя слово TRouBLe. Если четвертый параметр опущен, он такой же, как второй. Если третий тоже опущен, то он будет такой же, как первый. Если второй тоже опущен, он такой же, как первый.

Попробуйте значения border-image-width

Безразмерное число умножается на толщину border (18px). Ширина рисуемого изображения может отличаться от места, выделенного под border.

Значение свойства

border-image-width: 1

HTML и CSS примера
HTML
<div class="scene">
  <img
    class="source"
    src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2290%22%20height%3D%2290%22%20viewBox%3D%220%200%2090%2090%22%3E%3Cpath%20fill%3D%22%23245a85%22%20d%3D%22M0%200h90v90H0z%22%2F%3E%3Cpath%20fill%3D%22%23ffcb69%22%20d%3D%22M0%200h30v30H0zM60%200h30v30H60zM0%2060h30v30H0zM60%2060h30v30H60z%22%2F%3E%3Cpath%20fill%3D%22%23ef803c%22%20d%3D%22M30%2030h30v30H30z%22%2F%3E%3Cpath%20stroke%3D%22white%22%20stroke-width%3D%224%22%20d%3D%22M45%200v30M0%2045h30M60%2045h30M45%2060v30%22%2F%3E%3C%2Fsvg%3E"
    alt="Исходник: золотые углы, синие стороны с белыми метками, оранжевый центр"
  />
  <div class="demo-target">Рамка из изображения</div>
</div>
CSS
.scene {
  width: 100%;
  max-width: 300px;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.source {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto 24px;
}
.demo-target {
  box-sizing: border-box;
  width: 100%;
  min-height: 120px;
  padding: 16px;
  border: 18px solid #245a85;
  background: #fff3d6;
  border-image-source: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2290%22%20height%3D%2290%22%20viewBox%3D%220%200%2090%2090%22%3E%3Cpath%20fill%3D%22%23245a85%22%20d%3D%22M0%200h90v90H0z%22%2F%3E%3Cpath%20fill%3D%22%23ffcb69%22%20d%3D%22M0%200h30v30H0zM60%200h30v30H60zM0%2060h30v30H0zM60%2060h30v30H60z%22%2F%3E%3Cpath%20fill%3D%22%23ef803c%22%20d%3D%22M30%2030h30v30H30z%22%2F%3E%3Cpath%20stroke%3D%22white%22%20stroke-width%3D%224%22%20d%3D%22M45%200v30M0%2045h30M60%2045h30M45%2060v30%22%2F%3E%3C%2Fsvg%3E");
  border-image-slice: 30;
  border-image-repeat: stretch;
  border-image-width: 1;
}

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

Спецификация: CSS backgrounds

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьcss.properties.border-image-width
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
border-image-width✓16

Версия 16 выпущена в 2011 г.

Примечание MDN (англ.)

Before Chrome 112, a border image's absolute or percentage length width may not take precedence over a narrower border-width (bug 40541033).

✓12

Версия 12 выпущена в 2015 г.

Примечание MDN (англ.)

Before Edge 112, a border image's absolute or percentage length width may not take precedence over a narrower border-width (bug 40541033).

✓13✓15

Версия 15 выпущена в 2013 г.

Примечание MDN (англ.)

Before Opera 98, a border image's absolute or percentage length width may not take precedence over a narrower border-width (bug 40541033).

✓6✓18

Версия 18 выпущена в 2012 г.

Примечание MDN (англ.)

Before Chrome Android 112, a border image's absolute or percentage length width may not take precedence over a narrower border-width (bug 40541033).

✓14✓14

Версия 14 выпущена в 2013 г.

Примечание MDN (англ.)

Before Opera Android 75, a border image's absolute or percentage length width may not take precedence over a narrower border-width (bug 40541033).

✓6✓1.0

Версия 1.0 выпущена в 2013 г.

Примечание MDN (англ.)

Before Samsung Browser 23.0, a border image's absolute or percentage length width may not take precedence over a narrower border-width (bug 40541033).

✓4.4

Версия 4.4 выпущена в 2013 г.

Примечание MDN (англ.)

Before WebView Android 112, a border image's absolute or percentage length width may not take precedence over a narrower border-width (bug 40541033).

✓6
auto✓16✓12✓15✓15✓6✓18✓15✓14✓6✓1.0✓4.4✓6

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

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

/* Глобальные значения */
border-image-width: initial | inherit | unset | revert | revert-layer;

| — выбор варианта; [ ] — группа, а внутри типа — допустимый диапазон; {1,4} — число повторений от 1 до 4; ∞ — отсутствие верхней границы.

JavaScript синтаксис:

JavaScript
element.style.borderImageWidth = "10px";

Начальное значение свойства

1.

Значения свойства

Значения border-image-width
Значение Описание
length Задает ширину границы-изображения в единицах измерения CSS. Длина не должна быть отрицательной.
number Числовое значение, на которое будет умножено значение свойства border-width. Начальное значение. Число не должно быть отрицательным.
% Задает ширину границы-изображения в процентах. Процент не может быть отрицательным.
auto Значения соответствуют свойству border-image-slice. Если подходящего размера нет, используется значение border-width.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства border-image-width устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

CSS Backgrounds and Borders — спецификация border-image-width.

Наследуется

Нет.

Анимируемое

Да, по вычисленному значению: совместимые числовые значения интерполируются плавно. Переход между несовместимыми типами или ключевыми словами может быть дискретным.

Примеры, попробуйте сами

Толщина нарисованной границы

Сравните значения 1 и 2 при border-width: 12px. Измените 2 на 6px. border-image-width меняет нарисованную границу, но не выделенное под неё место в раскладке.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 24px;
}
section {
    min-width: 0;
    padding: 16px;
}
h3 {
    margin: 0 0 24px;
    font-size: 16px;
}
.sample {
    min-height: 150px;
    padding: 28px;
    background: #f4f6f8;
}
.bounds {
    outline: 1px dashed #607589;
}
index.html
HTML
<div class="comparison">
  <section>
    <h3>Вариант A</h3>
    <div class="bounds"><div class="sample">Содержимое блока</div></div>
  </section>
  <section>
    <h3>Вариант B</h3>
    <div class="bounds"><div class="sample second">Содержимое блока</div></div>
  </section>
</div>
style.css
CSS
.sample {
    border: 12px solid #607589; /* Граница задаёт место для рисунка. */
    border-image-source: repeating-linear-gradient(45deg, #245a85 0 12px, #edc44b 12px 24px);
    border-image-slice: 24;
    border-image-width: 1;
}
.second {
    border-image-width: 2;
}