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

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

Попробуйте

border-image-slice: 30;

border-image-slice: 30 fill;

border-image-slice: 44;

border-image: url("/shared-assets/images/examples/border-florid.svg") round;
border-image-slice: calc(50 / 184 * 100%) calc(80 / 284 * 100%) fill;
border-image-width: 30px 48px;

<section id="default-example">
  <div id="example-element">This is a box with a border around it.</div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

Синтаксис

/* All sides */
border-image-slice: 30%;

/* top and bottom | left and right */
border-image-slice: 10% 30%;

/* top | left and right | bottom */
border-image-slice: 30 30% 45;

/* top | right | bottom | left */
border-image-slice: 7 12 14 5;

/* Using the `fill` keyword */
border-image-slice: 10% fill;
border-image-slice: fill 10%;

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

Для свойства border-image-slice можно указать от одного до четырёх значений <number-percentage>, обозначающих положение каждого среза изображения. Отрицательные значения недопустимы; значения, превышающие соответствующий размер, ограничиваются значением 100%.

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

Необязательное значение fill, если оно используется, можно указать в любом месте объявления.

Значения

<number>

Задаёт смещение края в пикселях для растровых изображений и в координатах для векторных изображений. Для векторных изображений число отсчитывается относительно размера элемента, а не исходного изображения, поэтому в таких случаях обычно предпочтительнее использовать проценты.

<percentage>

Задаёт смещение края в процентах от размера исходного изображения: от его ширины для горизонтальных смещений и от высоты для вертикальных.

fill

Сохраняет среднюю область изображения и отображает её как фоновое изображение, но поверх самой background. Её ширина и высота соответствуют ширине верхней и левой областей изображения.

Описание

В результате разбиения создаются девять областей: четыре угла, четыре края и центральная область. Размер областей определяется четырьмя линиями среза, расположенными на заданном расстоянии от соответствующих сторон.

На приведённой выше схеме показано расположение каждой области.

• Области 1–4 — угловые. Каждая из них используется один раз для формирования угла итогового изображения границы.
• Области 5–8 — краевые. В итоговом изображении границы они повторяются, масштабируются или изменяются иным образом, чтобы соответствовать размерам элемента.
• Область 9 — центральная. По умолчанию она отбрасывается, но используется как фоновое изображение, если задано ключевое слово fill.

Свойства border-image-repeat, border-image-width и border-image-outset определяют, как эти области используются для формирования итогового изображения границы.

Формальное определение

Формальный синтаксис

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

Примеры

Настраиваемая ширина границы и срез

В следующем примере показан <div> с установленным изображением границы. Исходное изображение для границ выглядит так:

Ширина ромбов в исходном изображении составляет 30px, поэтому, если задать 30 пикселей для обоих свойств — border-width и border-image-slice, — ромбы в границе будут отображаться целиком и достаточно чётко:

border-width: 30px;
border-image-slice: 30;

В этом примере используются значения по умолчанию. Однако мы также добавили два ползунка, чтобы можно было динамически изменять значения этих свойств и оценить их влияние:

border-image-slice Изменяет размер среза изображения, используемого для каждой границы и угла границы (а также области содержимого, если используется ключевое слово fill). Если изменить значение относительно 30, граница будет выглядеть несколько неровной, но это может дать интересный эффект.

border-width: изменяет ширину границы. Размер выбранного изображения масштабируется так, чтобы поместиться в границу. Поэтому, если ширина больше размера среза, изображение может выглядеть несколько пикселизированным (если, конечно, не использовать изображение SVG).

HTML

<div class="wrapper">
  <div></div>
</div>

<ul>
  <li>
    <label for="width">slide to adjust <code>border-width</code></label>
    <input type="range" min="10" max="45" id="width" />
    <output id="width-output">30px</output>
  </li>
  <li>
    <label for="slice">slide to adjust <code>border-image-slice</code></label>
    <input type="range" min="10" max="45" id="slice" />
    <output id="slice-output">30</output>
  </li>
</ul>

CSS

.wrapper {
  width: 400px;
  height: 300px;
}

div > div {
  width: 300px;
  height: 200px;
  border-width: 30px;
  border-style: solid;
  border-image: url("/shared-assets/images/examples/border-diamonds.png");
  border-image-slice: 30;
  border-image-repeat: round;
}

li {
  display: flex;
  place-content: center;
}

JavaScript

const widthSlider = document.getElementById("width");
const sliceSlider = document.getElementById("slice");
const widthOutput = document.getElementById("width-output");
const sliceOutput = document.getElementById("slice-output");
const divElem = document.querySelector("div > div");

widthSlider.addEventListener("input", () => {
  const newValue = `${widthSlider.value}px`;
  divElem.style.borderWidth = newValue;
  widthOutput.textContent = newValue;
});

sliceSlider.addEventListener("input", () => {
  const newValue = sliceSlider.value;
  divElem.style.borderImageSlice = newValue;
  sliceOutput.textContent = newValue;
});

Результат

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

Совместимость с браузерами

См. также

• Иллюстрированное описание синтаксиса с одним–четырьмя значениями
• Изображения границ в CSS: ключевое направление Interop 2023 в блоге MDN (2023)