01.09.2026

16

Как изменить размер 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 .

На практике

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

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

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

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

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

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

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

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

border-width

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

Похожие записи

Как разблокировать режим edit rekordbox

admin

Как заменить воздушный фильтр на уаз буханка с 409 двигателем

admin

Как открыть файл rtf в word

admin