border-image

Свойство 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, и для того, чтобы создать элемент с закруглёнными краями, приходилось нарезать картинки и задавать рамку именно при помощи изображения. А закруглённые края, как на зло, были тогда в большой моде 🤯

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

+ Развернуть