border-image

Время чтения: 5 мин

Кратко

Секция статьи "Кратко"

Свойство border-image пригодится в том случае, если вы хотите задать блоку необычную рамку, а не просто сплошную или прерывистую линию одного цвета.

Это свойство позволяет использовать картинку в качестве «заливки» рамки.

Пример

Секция статьи "Пример"
        
          
          <div class="element">  <span>Выход<br>за<br>рамки</span></div>
          <div class="element">
  <span>Выход<br>за<br>рамки</span>
</div>

        
        
          
        
      
        
          
          .element {  border-left-style: solid;  border-left-width: 65px;  border-left-color: #1A5AD7;  border-image:    url("custom-border.svg")    66 /    66px 0 66px 66px /    0px 0    stretch;}
          .element {
  border-left-style: solid;
  border-left-width: 65px;
  border-left-color: #1A5AD7;
  border-image:
    url("custom-border.svg")
    66 /
    66px 0 66px 66px /
    0px 0
    stretch;
}

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Секция статьи "Как пишется"

В примере выше специально сделана разорванная рамка. Становится хорошо видно, как браузер поступает с изначальной картинкой рамки. Он делит её на девять частей:

  • четыре угла;
  • верх;
  • низ;
  • лево;
  • право;
  • центр.

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

Давайте разбираться.

После двоеточия значения указываются в следующем порядке:

        
          
          .selector {  border-image: источник фрагмент ИЛИ процент{1,4} [/ ширина {1,4}]    повторение{0,2};}
          .selector {
  border-image: источник фрагмент ИЛИ процент{1,4} [/ ширина {1,4}]
    повторение{0,2};
}

        
        
          
        
      

Числа в фигурных скобках ({1,4}, {0,2}) подсказывают, сколько раз может повторяться это значение.

Квадратные скобки указывают, что значение не является обязательным.

Источник

Секция статьи "Источник"

Обязательный параметр. Первым значением указывается ссылка на картинку, которая будет использована в качестве рамки для элемента. Обратите внимание, что ссылку нужно обернуть в круглые скобки и написать перед открывающей скобкой url. В итоге получится следующее:

        
          
          .selector {  border-image: url(border.png);}
          .selector {
  border-image: url(border.png);
}

        
        
          
        
      

Картинка может быть в любом формате. В том числе в SVG.

Можно использовать отдельное свойство border-image-source.

Фрагмент

Секция статьи "Фрагмент"

Размер одного фрагмента в пикселях. Важный момент: единицы измерения не пишутся, указывается только число. Например, если нужны фрагменты по 10 пикселей, то пишем:

        
          
          .selector {  border-image: url(border.png) 10;}
          .selector {
  border-image: url(border.png) 10;
}

        
        
          
        
      

Значение может быть указано в процентах:

        
          
          .selector {  border-image: url(border.png) 50%;}
          .selector {
  border-image: url(border.png) 50%;
}

        
        
          
        
      

Значение по умолчанию — 100%.

Можно указать от одного до четырёх числовых или процентных значений. Значения разделяются пробелами.

Можно использовать отдельное свойство border-image-slice.

Ширина

Секция статьи "Ширина"

Необязательное значение. Но обратите внимание на два момента:

  1. Для отображения рамки её ширина должна быть указана либо в свойстве border, либо в свойстве border-image. Если ширина рамки нигде не указана, то рамка не отображается.
  2. Если указываете ширину в свойстве border-image, то её значение отделяется от предыдущих слэшем /.
        
          
          .selector {  border-image: url(border.png) 50% / 10px;}
          .selector {
  border-image: url(border.png) 50% / 10px;
}

        
        
          
        
      

При указании ширины нужно указать единицы измерения.

Можно задать от одного до четырёх значений. Значения разделяются пробелами.

Можно использовать отдельное свойство border-image-width.

Повторение

Секция статьи "Повторение"

Описывает при помощи ключевых слов, как именно браузер должен поступить с фрагментами при создании рамки.

Ключевые слова, которые можно задать:

  • stretch — значение по умолчанию. Фрагмент рамки растягивается так, чтобы заполнить промежуток между углами.
  • repeat — фрагменты повторяются до тех пор, пока области между углами не будут заполнены. Фрагмент может быть обрезан.
  • round — браузер повторяет фрагменты для заполнения пространства между углами, но не обрезает их. При этом, если целое число фрагментов не закрывает всю площадь, то они равномерно распределяются, так что возможно появление промежутков между фрагментами.
  • space — фрагменты повторяются, а свободное место, оставшееся после повторения целого количества фрагментов, распределяется равномерно.

Можно указать до двух значений: для горизонтали и для вертикали. Если указать одно значение, то оно применится ко всем сторонам рамки.

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

        
          
          .selector {  border-image: url(border.png) 50% / 10px round stretch;}
          .selector {
  border-image: url(border.png) 50% / 10px round stretch;
}

        
        
          
        
      

У этого свойства есть и другие скрытые возможности. Например, управление центральной частью блока.

Центральная часть по умолчанию пустая. Чтобы заполнить её фрагментами, можно задать ключевое слово fill после значения размера фрагмента. Но для этого трюка нужно, чтобы картинка рамки включала в себя центральную часть 🔮

Фрагментами будет заполнена и центральная часть:

        
          
          .selector {  border-image: url(border-fill.png) 50% fill / 10px round stretch;}
          .selector {
  border-image: url(border-fill.png) 50% fill / 10px round stretch;
}

        
        
          
        
      

Можно использовать отдельное свойство border-image-repeat.

Подсказки

Секция статьи "Подсказки"

💡 Обязательно задаётся ширина рамки. Либо в этом свойстве, либо при помощи шортката border, либо при помощи отдельного свойства border-width.

💡 Рамка — стильная штука. Без значения для свойства стиля рамка не покажется. Соответственно, нужно либо указать значение в шорткате border, либо при помощи отдельного свойства border-style.

💡 Можно сбросить картинку рамки при помощи ключевого слова none в качестве значения.

💡 Помимо картинки, в качестве рамки можно задать градиент.

Для этого вместо url() пишется linear-gradient() либо radial-gradient(). Остальные значения указываются так же, как если бы была указана картинка.

На практике

Секция статьи "На практике"

Алёна Батицкая

Секция статьи "Алёна Батицкая"

🛠 Это свойство редко встречается в повседневной работе, но знать о нём стоит хотя бы из уважения к истории развития веба.

Раньше не существовало свойства border-radius, и для того, чтобы создать элемент с закруглёнными краями, приходилось нарезать картинки и задавать рамку именно при помощи изображения. А закруглённые края, как на зло, были тогда в большой моде 🤯

Короче, нам повезло, сейчас попроще.