border

Пример

<div class="card">Карточка с рамкой</div>

.card {
  padding: 1rem;
  border: 2px solid teal;
  border-radius: 6px;
}

Синтаксис

border: <line-width> || <line-style> || <color>;

Начальное значение

medium none currentColor

Применяется к

всем элементам

Наследуется

нет

Анимируется

как у отдельных свойств — толщина и цвет плавно, стиль дискретно

Вычисляемое значение

как у отдельных свойств border-width, border-style и border-color

Три части — толщина, стиль и цвет — пишутся в любом порядке, любую можно пропустить. Без стиля рамки не будет: у border-style начальное значение none.

border: 1px solid; /* цвет — currentColor */
border: dashed red; /* толщина — medium, обычно 3px */
border: 4px double #333;

Отдельные стороны: border-top, border-right, border-bottom, border-left или логические border-block и border-inline.

Значения

Толщина

Длина (1px, 0.2em) или слова thin, medium, thick.

Стиль

none и hidden — рамки нет; solid — сплошная линия; dashed — пунктир; dotted — точки; double — двойная линия; groove, ridge, inset, outset — «объёмные» рамки.

Цвет

Любой цвет CSS. Если не указан — currentColor, то есть цвет текста.

Как понять

Рамка лежит между внутренним (padding) и внешним (margin) отступами и по умолчанию добавляется к размеру элемента: блок width: 200px с рамкой 2px займёт 204 пикселя. С box-sizing: border-box рамка помещается внутрь заданной ширины.

border задаёт одинаковую рамку для всех сторон и сбрасывает то, что не указано. Поэтому сначала пишут общую рамку, а потом уточняют стороны: border: 1px solid; border-bottom-width: 3px;.

Примеры

Разные стили линий

<div class="demo solid">solid</div>
<div class="demo dashed">dashed</div>
<div class="demo dotted">dotted</div>
<div class="demo double">double</div>

.demo {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border: 4px solid seagreen;
}

.dashed {
  border-style: dashed;
}

.dotted {
  border-style: dotted;
}

.double {
  border-style: double;
}

Линия только снизу

Разделитель у пунктов списка — рамка с одной стороны:

<ul class="list">
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
</ul>

.list {
  padding: 0;
  list-style: none;
}

.list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid silver;
}

.list li:last-child {
  border-bottom: none;
}

Подсказки

• Без стиля рамки нет: border: 2px red ничего не нарисует — допишите solid.
• Рамка, которая появляется при наведении, сдвигает соседние элементы. Держите прозрачную рамку заранее (border: 2px solid transparent) и меняйте только цвет — или используйте outline, который не влияет на раскладку.
• Скругление углов задаёт отдельное свойство border-radius, а картинку вместо рамки — border-image.
• Для фокуса клавиатуры используйте outline, а не border: он не меняет размеры и лучше виден в режиме высокой контрастности.