css.in.ua
Підтримати

css властивість border-image-width

Властивість border-image-width визначає ширину зображення заданого для межі елементу, встановлюючи внутрішні відступи від країв меж. Якщо значення border-image-width більше, ніж значення border-width, тоді зображення виходить за краї полів або вмісту елементу.

Властивість `border-image-width`

border-image-width використовується разом з такими властивостями як border-image-source, border-image-repeat, border-image-outset та border-image-slice для стилізування меж елементів.

Значення без задання - 1, тому, якщо значення не встановлено, але для елемента є визначення кордону або ширини кордону, зображення буде намальовано з такою шириною.

Порада:

Щоб зекономити час, рекомендується використовувати border-image для встановлення всіх властивостей для зображення межі одним правилом.
Порада:

Зверніть увагу, border-image використовується замість border-style, який буде показаний тільки у випадку, якщо сталася помилка при завантаженні зображення, або для border-image встановлене значення none.
Нотатка:

Чотири значения border-image-width вказують на зміщення, які використовуються для розділення зображення границі на девять частин. Вони представляють внутрішні відстані від верхньої, правої, нижньої та лівої сторони області зображення. Якщо четверте значення пропущено, воно встановлюється рівним другому. Якщо третя значення також пропущено, воно встановлюється рівним першому. Якщо и друге значение не вказано, тоді воно береться рівним первошу. Негативні значення не припустимі для будь-яких значень border-image-width.

Синтаксис

border-image-width: number|%|length|auto|initial|inherit;

Властивість border-image-width може отримувати 6 значень:

number

Ширина кордону в пікселях.

%

Ширина у відсотках по відношенню до висоти та ширині зображення для кордону.

length

Ширина у пікселях.

auto

Ширина відповідно ширині нарізаних зображень.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента.

Значення без задання: 1
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.borderImageWidth="20px"

Переглядачі

Переглядач
border-image-width

15.0

11.0

13.0

6.0

15.0

Мобільних переглядачів ще не додано.


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Демонстрація роботи властивості

Демонстрація роботи властивості

Приклад використання властивості

Задає товщину зображення-границі

#borderimg { 


  border-image-source: url(border.png); 


  border-image-width: 10px; 


}

Додаткові посилання

Спільнота

Зв'язок