Как изменить размер border в css

Изменить высоту border

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

Отслеживать
задан 28 июл 2016 в 1:46
665 1 1 золотой знак 8 8 серебряных знаков 25 25 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Вот пример с border-image для одной (нижней) стороны

body < margin: 0; padding: 10px; >div < background-color: #e2e2e2; border: solid transparent; border-width: 0 0 20px; border-image:url("https://thumbs.dreamstime.com/x/love-line-colorful-drawing-vertical-seamless-pattern-illustration-lines-background-graphic-texture-wallpaper-64879256.jpg") 2 repeat; >

Отслеживать
ответ дан 28 июл 2016 в 2:45
4,599 2 2 золотых знака 15 15 серебряных знаков 29 29 бронзовых знаков

Для задания border только одной из сторон используются свойства:

border-top верхний
border-bottom нижний
border-left левый
border-right правый

Толщину border можно задавать через border-width или прямо в border вторым значением.

div 100x100

Как уменьшить или увеличить border?

Есть такой код:

Рафаэль Надаль проиграл сотой ракет.

Нужно например, уменьшить нижний border или увеличить что бы заходил за рамки блока или наоборот был меньше. Как это можно сделать?

Вопрос задан более трёх лет назад
5901 просмотр

box — sizing

Это свойство определяет как будут вести себя размеры блока.

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

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

Светлана Коробцева ,
Антон Капустинский

Обновлено 2 ноября 2022

Кратко

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

При помощи свойства box — sizing можно изменить то, как браузер будет рассчитывать размеры элемента.

По умолчанию размером элемента считается размер контентной области. Если кроме width и height указать ещё и padding с border , то браузер посчитает размер элемента как width + padding * 2 + border * 2 и height + padding * 2 + border * 2 .

�� Если задать значение border — box для свойства box — sizing , то браузер изменит принцип расчёта и padding с border уже будут включены в width и height .

Подробнее об особенностях расчёта размеров элемента можно прочитать в статье «Блочная модель».

Пример

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

Создадим два элемента и зададим обоим элементам идентичные стили:

 div class="element first">div> div class="element second">div>

 .element  display: inline-block; width: 100px; height: 100px; padding: 25px; border: 10px solid #ffffff;> .element  display: inline-block; width: 100px; height: 100px; padding: 25px; border: 10px solid #ffffff; >

Отличаться они будут только фоном и значением свойства box — sizing .

 .first  box-sizing: content-box; background-color: #2E9AFF;> .second  box-sizing: border-box; background-color: #F498AD;> .first  box-sizing: content-box; background-color: #2E9AFF; > .second  box-sizing: border-box; background-color: #F498AD; >

В итоге элементы получились разного размера! Как так? Мы ведь указали одинаковые ширину, высоту и внутренние отступы, а так же рамку ��

Как понять

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

Причина в том, что при значении свойства box — sizing , равном content — box (значение по умолчанию) ширина элемента рассчитывается следующим образом:

Ширина контентной области (100) + внутренний отступ слева и справа (25 + 25) + ширина правой и левой рамок (10 + 10). Итого: 170 пикселей.

Аналогично с высотой.

Выходит что первый элемент получил размеры 170 х 170.

Размер второго элемента считается иначе. Из-за значения свойства box — sizing браузер воспринимает width и height как конечные размеры элемента. Получается что в 100 пикселей указанной ширины уже включены и внутренние боковые отступы и боковые рамки. Размеры второго элемента будут 100 х 100.

Как пишется

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

В качестве значения для свойства box — sizing невозможно использовать что-то кроме ключевых слов. Значение может быть только одно.

content — box — значение по умолчанию. Финальная ширина = ширина + правый внутренний отступ + левый внутренний отступ + правая рамка + левая рамка
border — box — значение width и height являются финальными размерами элемента. Финальная ширина = ширина

Подсказки

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

�� Свойство нельзя анимировать при помощи transition ��

�� Свойство не наследуется.

�� При любом значении свойства внешние отступы ( margin ) в расчёт не берутся.

�� Значение по умолчанию: content — box .

На практике

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

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

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

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

Подгонять размер элемента под желаемый, высчитывая самостоятельно, какими должны быть внутренние отступы и рамка, чтобы в итоге получился нужный размер.
В самом начале работы «сбросить» стандартное значение, заменив его на предсказуемое box — sizing .

Для «сброса» можно использовать универсальный селектор. Напиши в самом начале файла со стилями:

 *  box-sizing: border-box;> *  box-sizing: border-box; >

Теперь все размеры элементов будут равны тем значениям, что заданы в свойствах width и height . Так победим ��

border-width

CSS свойство border-width задает ширину рамки для элемента. Можно использовать от 1 до 4 значений. Ширина устанавливается начиная с верхней позиции. Если задано два значения ширины подряд, это значит первое значение для верхней и нижней границы, второе значение для правой и левой границы.

border-width:thin medium thick 10px;

Верхняя граница — тонкая
Правая граница — средняя
Нижняя граница — толстая
Левая граница — 10px

Верхняя граница — тонкая
Правая и левая границы — средние
Нижняя граница — толстая

Верхняя и нижняя границы — тонкие
Правая и левая границы — средние

Все четыре границы — тонкие

Синтаксис

border-width: medium|thin|thick|ширина|inherit;

Значения свойства

Значение	Описание
thin	Тонкая граница рамки.
medium	Средняя граница рамки.
thick	Толстая граница рамки.
ширина	Позволяет определить ширину рамки в единицах измерения, используемых в CSS.
inherit	Указывает, что значение наследуется от родительского элемента.