Ширина border css: html — CSS. Как задать border-width?

border-width — CSS — Дока

1. Кратко
2. Пример
3. Как пишется
4. Подсказки

Кратко

Свойство border-width управляет толщиной рамки элемента.

Пример

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

<p>Блок текста, обведённый рамкой</p>
          <p>Блок текста, обведённый рамкой</p>

.text {  border-style: solid;  border-width: 3px;}
          .text {
  border-style: solid;
  border-width: 3px;
}

Как пишется

Для задания толщины можно использовать три переменные — thin, medium или thick, в большинстве браузеров это соответствует размерам 2 px, 4 px и 6 px соответственно.

Сама же спецификация не приравнивает эти переменные к определённому размеру, а только говорит что значение thin должно быть меньше medium, а оно, в свою очередь, меньше thick, остальное контролируется на уровне браузера. Поэтому, для более точного значения, толщину можно указывать в пикселах или других единицах измерения.

Ключевое слово inherit наследует значение родителя, а initial применяет значение по умолчанию, равное medium.

Разрешается указывать одно, два, три или четыре значения. В зависимости от этого получится разный результат:

1. border-width: 1px — одно значение, толщина рамки со всех сторон одинаковая.
2. border-width: 1px 2px — два значения, первое устанавливает толщину рамки сверху и снизу, второе — слева и справа.
3. border-width: 1px 2px 3px — три значения, первое значение устанавливает толщину рамки сверху, второе — слева и справа, а третье — снизу.
4. border-width: 1px 2px 3px 4px — четыре значения, устанавливает для каждой стороны свою толщину, поочерёдно: для верхней, правой, нижней и левой рамки.

Чаще всего это свойство используется в шорткате border, так как обычно задаётся сразу и цвет и стиль и толщина рамки, а сокращённая форма позволяет сделать это более элегантно.

На этом демо можете посмотреть как выглядят разные размеры толщины рамки при разных значениях стиля рамки.

Подсказки

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

💡 Значение по умолчанию medium.

💡 Можно анимировать, читайте подробнее про CSS-анимации.

💡 Поддерживается всеми современными браузерами.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

border-color

alt + ←

→

outline

alt + →

Толщина границы — Tailwind CSS

​Основы использования

​Все стороны

Используйте утилиты border, . border-0, .border-2, .border-4 или .border-8, чтобы установить ширину границы для всех сторон элемента.

border

border-2

border-4

border-8

<div></div>
<div></div>
<div></div>
<div></div><div></div>
<div></div>
<div></div>
<div></div> 

​Отдельные стороны

Используйте утилиты border-{side}, .border-{side}-0, .border-{side}-2, .border-{side}-4 или .border-{side}-8 для установки ширины границы для одной стороны элемента.

border-t-4

border-r-4

border-b-4

border-l-4

<div></div>
<div></div>
<div></div>
<div></div>

​Горизонтальные и вертикальные стороны

Используйте утилиты border-{x|y}-{width} для установки ширины границы с двух сторон элемента одновременно.

border-x-4

border-y-4

<div></div>
<div></div>

​Между элементами

Вы также можете добавить границы между дочерними элементами с помощью утилит divide-{x/y}-{width} и divide-{color}

01

02

03

<div>
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div><div>
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Дополнительные сведения смотрите в документации Ширина разделения и Цвет разделения.

​Применяя условно

​Наведение, фокус и другие состояния

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:border-t-4 to only apply the border-t-4 utility on hover.

<div>
  <!-- ...  -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

​Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:border-t-4 to apply the border-t-4 utility at only medium screen sizes and above.

<div>
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

​Использование пользовательских значений

​Настройка вашей темы

По умолчанию Tailwind предоставляет пять утилит border-width, и такое же количество утилит на каждую сторону (горизонтальную, вертикальную, верхнюю, правую, нижнюю и левую). Вы изменяете, добавляете или удаляете их, редактируя раздел theme. borderWidth в вашей конфигурации Tailwind.

tailwind.config.js

module.exports = {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      '0': '0',
      '2': '2px',
      '3': '3px',
      '4': '4px',
      '6': '6px',
      '8': '8px',
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

​Произвольные значения

If you need to use a one-off border-{side}-{width} value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div>
  <!-- ... -->
</div>

Learn more about arbitrary value support in the arbitrary values documentation.

Ширина левой границы CSS

<стиль> дел { размер шрифта: 1.5em; отступ: 20 пикселей; ширина левой границы: 9px; стиль границы слева: сплошной; цвет границы слева: оранжевый; }

Этот ‘div’ оформлен с использованием CSS border-left-width. Попробуйте изменить значение, чтобы увидеть, как оно повлияет на ширину левой границы.

Ширина границы слева CSS 9Свойство 0006 позволяет установить ширину левой границы.

Вы также можете использовать border-width , чтобы установить ширину для всех сторон вашего элемента, или border-left , чтобы установить все свойства границы для левой границы.

Ширина границ по умолчанию: , средняя .

Если вы используете рамку без указания ее цвета, она будет использовать значение currentColor (которое является значением свойства color ).

Перед отображением необходимо указать стиль границы. Вы можете использовать либо border-left-style или border-style , чтобы указать стиль границы.

Синтаксис

граница слева-ширина: