Укажите, как обрезать изображение границы:
#borderimg {
border-image-slice: 30%;
}
Попробуйте сами »
Определение border-image-slice
CSS свойство border-image-slice определяет, как нарезать изображение, указанное в border-image-source. Изображение всегда разрезается на девять частей: четыре угла, четыре кромки и середина.
"Средняя" часть рассматривается как полностью прозрачная, если не задано ключевое слово fill.
Совет: Также посмотрите на свойство border-image (сокращенное свойство для настройки всех свойств border-image-*).
| Значение по умолчанию: | 100% |
|---|---|
| Унаследовано: | no |
| Анимируемый: | no. Читайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.borderImageSlice="30%" Попробуй |
Поддержка border-image-slice
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
Синтаксис border-image-slice
border-image-slice: number|%|fill|initial|inherit;
Примечание: CSS свойство border-image-slice может принимать от одного до четырех значений. Если четвертое значение опущено, оно совпадает со вторым. Если третье значение также опущено, оно совпадает с первым. Если второе значение также опущено, оно совпадает с первым.
Значения border-image-slice
| Значение | Описание | Демонстрация |
|---|---|---|
| number | Числа представляют собой пиксели для растровых изображений или координаты для векторных изображений | Демо ❯ |
| % | Проценты указаны относительно высоты или ширины изображения | Демо ❯ |
| fill | Приводит к отображению средней части изображения | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Страницы по теме border-image-slice
CSS Учебник: CSS Границы изображения
CSS Справочник: border-image свойство
CSS Справочник: border-image-outset свойство
CSS Справочник: border-image-repeat свойство
CSS Справочник: border-image-source свойство
CSS Справочник: border-image-width свойство
HTML DOM справочник: borderImageSlice свойство