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

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

CSS свойство border-image-slice определяет, как разделить изображение, используемое в роли изображения-границы и указанное в свойстве border-image-source.

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

Свойство задаёт смещения внутрь от верхней, правой, нижней и левой кромки изображения. Линии разреза образуют девять секций:

Девять частей исходного изображения. Цифры соответствуют пояснениям ниже.
152896473
  • Углы (1–4) размещаются в углах элемента.
  • Края (5–8) размещаются вдоль сторон. Их растяжение или повторение задаёт border-image-repeat; начальное значение stretch растягивает края.
  • Середина (9) не отображается, если не указано ключевое слово fill.

Ширину изображения-границы задаёт border-image-width, а его выход за пределы границы — border-image-outset.

Можно указать от одного до четырёх значений смещения:

  • Одно — для всех сторон.
  • Два — сверху и снизу, затем справа и слева.
  • Три — сверху, справа и слева, снизу.
  • Четыре — сверху, справа, снизу, слева (по часовой стрелке).

На схеме ниже показано border-image-slice: 20% 10% 20% 10%: отступы сверху и снизу составляют 20% высоты изображения, справа и слева — 10% ширины. Сокращённая запись — 20% 10%.

border-image-slice: 20% 10%;
152896473

Вертикальные разрезы — на 10% и 90% ширины; горизонтальные — на 20% и 80% высоты. Размер середины: 80% ширины и 60% высоты исходного изображения.

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

Числа задают отступ среза от края исходного SVG. При 30 выделены девять квадратов. fill сохраняет центральный оранжевый фрагмент и рисует его под содержимым.

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

border-image-slice: 30

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-width: 1;
  border-image-repeat: stretch;
  border-image-slice: 30;
}

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

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

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

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

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

CSS синтаксис:

CSS
border-image-slice: [ <number [0,∞]> | <percentage [0,∞]> ]{1,4} && fill?;

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

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

JavaScript синтаксис:

JavaScript
element.style.borderImageSlice = "100%";

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

100%.

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

Значения border-image-slice
Значение Описание
number Указывается число для смещения, которое означает для растровых изображений - количество пикселей (обратите внимание, что px не указывается), а для векторных изображений координаты. Допускается указать от одного до четырех значений (top, right, bottom и left). Угловые куски разделённого изображения будут размещены в углах элемента, к которому применяется свойство. Края разделённых изображений будут помещены по краям элемента (по умолчанию будут растянуты - значение stretch свойства border-image-repeat. Отрицательные значения недопустимы. Значения больше, чем размер изображения интерпретируются как 100%.
% Проценты указаны относительно высоты или ширины используемого изображения. Начальное значение.
fill Определяет отображать или нет центральную часть изображения. Ключевое слово fill используется совместно со значениями number и/или % .
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства border-image-slice устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

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

Наследуется

Нет.

Анимируемое

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

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

Срезы и заполнение центра

Исходная картинка имеет размер 90 × 90 пикселей. Срез 30 отделяет углы и стороны. Сравните 30 и 30 fill: fill сохраняет центральную часть. Измените 30 на 15 и посмотрите, как изменились части рамки.

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
<p>Исходное изображение (90 × 90):</p>
<img src="assets/frame.png" width="90" height="90" alt="Девять цветных областей: углы, стороны и центр" />
<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: 16px solid #607589;
    border-image-source: url('assets/frame.png');
    border-image-slice: 30; /* Срезы от каждого края исходной картинки. */
    border-image-repeat: round;
}
.second {
    border-image-slice: 30 fill;
}