Свое изображение border css

border — image

Надоели скучные одноцветные рамки? Используйте картинку!

Кратко

Скопировать ссылку «Кратко» Скопировано

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

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

Пример

Скопировать ссылку «Пример» Скопировано

   Выход
за
рамки  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: источник фрагмент ИЛИ процент [/ ширина ] повторение;> .selector  border-image: источник фрагмент ИЛИ процент1,4> [/ ширина 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 ( ) . Остальные значения указываются так же, как если бы была указана картинка.

• Chrome 56, Поддерживается 56
• Edge 12, Поддерживается 12
• Firefox 50, Поддерживается 50
• Safari 9.1, Поддерживается 9.1

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

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

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

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

Источник

Как добавить границу к изображению в CSS

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

Элемент имеет атрибут, который не используется в версиях после HTML5. Поэтому мы рекомендуем использовать CSS свойство border вместо этого.

1. Создайте HTML

img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">

2. Добавьте CSS

• Добавьте style к элементу .
• Укажите width изображения.
• Укажите ширину, стиль и цвет границы с помощью свойства border.

img < width:650px; border:1px solid black; >

Пример

html> html> head> title>Заголовок документа title> style> img < width:650px; border:1px solid black; > style> head> body> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> body> html>

Как добавить стиль к изображению границы

Для того, чтобы изменить цвет границы, можно добавить CSS свойство color. Если хотите получить двойную границу, необходимо добавить свойство padding к стилю изображения:

Пример

html> html> head> title>Заголовок документа title> style> img < width:650px; padding:1px; border:1px solid #021a40; > style> head> body> h2>Пример двойной границы h2> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> body> html>

Возможно также получить двойную границу с разными цветами внутренней границы. Для этого добавьте свойство background-color.

Пример

html> html> head> title>Заголовок документа title> style> img < width:650px; padding:5px; border:8px solid #999999; background-color: #e6e6e6; > style> head> body> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> body> html>

Можете также указать границы по отдельности. Для этого используйте CSS свойства border-bottom, border-top, border-left и border-right и для каждого задайте разные значения width. Рассмотрим пример, где свойство border-bottom установлено так, чтобы получился эффект баннера.

Пример

html> html> head> title>Заголовок документа title> style> img < width: 225px; border: 8px solid #ccc; border-bottom: 130px solid #ccc; > style> head> body> img src="/uploads/media/default/0001/02/7f55a71df52da6d26ef4963f78aed38d64a7874c.jpeg" alt="Nature"> body> html>

Для того, чтобы добавить стиль к границе изображения, добавьте свойство border-style к элементу .

Пример

html> html> head> title>Заголовок документа title> style> img < width:650px; padding:5px; border:12px #1c87c9; border-style: dashed; background-color: #eee; > style> head> body> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> body> html>

Как задать углы и получить круглые границы

Для того, чтобы указать каждый угол границы, необходимо использовать CSS свойство border-radius. Свойство border-radius может иметь от одного до четырех значений. Рассмотрим пример с четырьмя значениями:

Запомните, что при использовании четырех значений они будут применены к углам в следующем порядке: top-left, top-right, bottom-right, bottom-left.

Пример

html> html> head> title>Заголовок документа title> style> img < width:650px; padding:2px; border:3px solid #1c87c9; border-radius: 15px 50px 800px 5px; > style> head> body> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> body> html>

Вместо того, чтобы пытаться вложить изображение в другой элемент, или редактировать каждое изображение в photoshop для получения желаемого эффекта, вам необходимо установить свойство border-radius в значение 50% или 999em. Задайте одинаковые значения для width и height.

Пример

html> html> head> title>Заголовок документа title> style> div.imageborder < border-radius: 999em; width: 350px; height: 350px; padding: 5px; line-height: 0; border: 10px solid #000; background-color: #eee; > img < border-radius: 999em; height: 100%; width: 100%; margin: 0; > style> head> body> h2>Пример круглой границы h2> div class="imageborder"> img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" height="350" width="350" alt="iceland" /> div> body> html>

Источник