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

Свойство border-image-slice определяет, как разделить изображение, указанное в свойстве border-image-source, на девять частей: четыре угла, четыре края, середина. "Средняя" часть является полностью прозрачной, если не установлено значение "fill".

Свойство border-image-slice имеет три значения: number, percentage и fill. Number указывает на смещение краев в пикселях для растрового изображения и на координаты для векторного изображения. Percentage определяет смещение краев в виде процентов оригинального размера изображения. При значении fill, средняя часть изображения отображается в виде фонового изображения.

Это свойство может иметь до четырех значений. Отрицательные значения недопустимы. Если применено одно значение, все четыре части будут на равном расстоянии от соответствующих сторон. При наличии двух значений, первое из них формирует части, которые измеряются с верхней и нижней стороны, а второе формирует части, которые измеряются с правой и левой стороны. Если применены три значения, первое формирует части, измеряемые с верхней стороны, второе - части, измеряемые с левой и правой стороны, а третье - с нижней стороны. А при наличии четырех значений, они формируют части с четырех сторон.

Значение по умолчанию 100%.
Применяется Ко всем элементам, а также к ::first-letter .
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.borderImageSlice = "10

Синтаксис

border-image-slice: number | % | fill | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
      border-image-slice: 20%;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-image-slice</h2>
    <p class="border">Здесь установлено 20% для border-image-slice.</p>
    <p>Здесь использовано оригинальное изображение:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
      border-image-slice: 30 50;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-image-slice</h2>
    <p class="border">Здесь установлены 30 и 50 для border-image-slice.</p>
    <p>Здесь использовано оригинальное изображение:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Пример, где первое значение установлено с помощью percentages, а второе с помощью "fill".

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
      border-image-slice: 15% fill;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-image-slice</h2>
    <p class="border"><strong>Здесь установлено 15 fill для border-image-slice.</strong></p>
    <p>Здесь использовано оригинальное изображение:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Значения

Значение Описание
number Указывает на смещение краев в пикселях для растрового изображения и на координаты для векторного изображения.
% Percentage определяет смещение краев в виде процентов оригинального размера изображения.
fill Средняя часть изображения отображается в виде фонового изображения.
initial Средняя часть изображения отображается в виде фонового изображения.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
15.0+ 12.0+ 15.0+ 6.0+ 15.0+

Практикуйте свои знания

What is the function of the 'border-image-slice' property in CSS?
Считаете ли это полезным?