Как сделать border короче css

border — image

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

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

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 11 мая 2023

Кратко

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

Свойство 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 — Урок 9. Свойства — margin, padding, border

Сегодня мы будем учиться задавать свойства блоков. И делать это мы будем на примерах элементов div и span. div — этот элемент является контейнером для остальных. Элемент div отделяется от остальных элементов абзацными отступами. Элемент span, в отличии от div, создает строчный блок.

Посмотрим на примере, создайте html-страницу со следующим кодом:

Заголовок документа

Это текст в тегах div с .

Это текст в тегах div с .

Это текст в тегах div с .

Длина рамки CSS

Как сделать рамку длиннее или наоборот?

Отслеживать

51.4k 86 86 золотых знаков 267 267 серебряных знаков 505 505 бронзовых знаков

задан 21 мар 2012 в 14:34

190 2 2 золотых знака 5 5 серебряных знаков 15 15 бронзовых знаков

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

box-sizing

Применяется для изменения алгоритма расчета ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины контента ( width ), значений отступов ( margin ), полей ( padding ) и границ ( border ). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Синтаксис

box-sizing: content-box | border-box | padding-box | inherit

Значения

content-box Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ. border-box Свойства width и height включают в себя значения полей и границ, но не отступов ( margin ). Эта модель используется браузером Internet Exporer в режиме несовместимости. padding-box Свойства width и height включают в себя значения полей, но не отступов ( margin ) и границ ( border ). inherit Наследует значение родителя.

HTML5 CSS3 IE Cr Op Sa Fx

В данном примере ширина первого слоя будет равна 324 пиксела, поскольку она складывается из значения ширины контента ( width ), полей слева и справа ( padding ) и толщины границ ( border ). Ширина второго слоя равняется 300 пикселов за счет применения свойства box-sizing . Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Ширина блоков

Браузеры

Firefox поддерживает нестандартное свойство -moz-box-sizing .

Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 поддерживают нестандартное свойство -webkit-box-sizing .

Internet Explorer, Chrome, Opera и Safari не поддерживают значение padding-box .