border-image-outset

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

Части граничного изображения, отображаемые за пределами рамки элемента с параметром border-image-outset, не вызывают переполнение полос прокрутки и не захватывают события мыши.

Демо

Фон

• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• box-shadow

Синтаксис

/* <length> value */
border-image-outset: 1rem;

/* <number> value */
border-image-outset: 1.5;

/* top and bottom | left and right */
border-image-outset: 1 1.2;

/* top | left and right | bottom */
border-image-outset: 30px 2 45px;

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

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

Значения

Значение по-умолчанию:

border-image-outset: 0;

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

• CSS Backgrounds and Borders Module Level 3

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

Can I Use border-image? Data on support for the border-image feature across the major browsers from caniuse.com.

Комментарии