mask-border-slice

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

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

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

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

/* Using the `fill` keyword */
mask-border-slice: 10% fill 7 12;

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

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

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

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

<number>

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

<percentage>

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

fill

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

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

На диаграмме показано расположение каждой области.

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

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

mask-border-slice = 
  [ <number> | <percentage> ]{1,4} fill?  

Это свойство пока не поддерживается нигде. Когда оно будет поддерживаться, оно будет определять размер фрагментов, взятых из исходного изображения и используемых для создания маски границы.

mask-border-slice: 30 fill;

Браузеры на основе Chromium поддерживают устаревшую версию этого свойства — mask-box-image-slice — с префиксом:

-webkit-mask-box-image-slice: 30 fill;

• mask-border
• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-source
• mask-border-width
• Иллюстративное описание синтаксиса с 1 до 4 значений