Справочник · CSS

border: рамка элемента

Редакция PraktumОбновлено 24 октября 20266 мин чтенияУровень: новичок

Свойство border рисует рамку вокруг элемента. Это короткая запись трёх свойств: толщины border-width, стиля border-style и цвета border-color — например, border: 1px solid #d9d3c7. Без стиля рамка не появится: по умолчанию он none.

Минимальный пример

.card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.card-footer {
  border-top: 1px dashed #cbd5e1;
}

Карточка получила тонкую сплошную рамку и скругление, а подвал карточки — пунктирную линию сверху. Порядок значений в короткой записи не важен, но привычно писать «толщина стиль цвет».

Из чего состоит border

Если цвет не указан, рамка берёт цвет текста элемента. Это удобно: border: 1px solid у ссылки-кнопки будет того же цвета, что и надпись, и поменяется вместе с ней.

Стили рамки

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

.tab { border-bottom: 2px solid transparent; }
.tab.is-active { border-bottom-color: #2a62d9; }

.quote {
  border-left: 4px solid #2a62d9;
  padding-left: 16px;
}

.box {
  border: 1px solid #ddd;
  border-bottom: 0;          /* убрать только нижнюю */
}

Для каждой стороны есть своё свойство: border-top, border-right, border-bottom, border-left, а у каждого — свои width, style и color. Прозрачная рамка у неактивной вкладки резервирует место: при переключении на активную текст не прыгает на 2 пикселя. Логические аналоги border-block и border-inline не зависят от направления письма.

Короткая запись по сторонам

.box { border-width: 1px 2px; }            /* верх и низ 1px, бока 2px */
.box { border-color: #ddd #ddd #2a62d9; }   /* верх, бока, низ */
.box { border-style: solid dashed solid dotted; }

Как у margin и padding: одно значение — всем сторонам, два — верх/низ и бока, три — верх, бока, низ, четыре — по часовой стрелке от верхней.

Рамка и ширина элемента

*, *::before, *::after { box-sizing: border-box; }

.field {
  width: 100%;
  border: 2px solid #cbd5e1;
  padding: 10px;
}

По умолчанию (content-box) рамка добавляется к ширине: блок с width: 100% и рамкой 2px окажется на 4px шире родителя и вылезет. С box-sizing: border-box рамка и padding входят в заданную ширину. Подробнее — на странице box-sizing.

Линия-разделитель между элементами

.list li + li { border-top: 1px solid #e5e7eb; }
/* или */
.list li:not(:last-child) { border-bottom: 1px solid #e5e7eb; }

Разделитель между пунктами списка ставят через соседний селектор или :not(:last-child): так у первого и последнего пункта не появляется лишней линии по краю.

Рамка без рамки: прозрачный цвет и треугольник

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 16px;
  border: 8px solid transparent;
  border-top-color: #171923;   /* треугольник вниз */
}

Рамки соседних сторон сходятся по диагонали. Если у пустого элемента три стороны прозрачные, а одна цветная, получается треугольник — классический «хвостик» подсказки. Сейчас то же можно сделать через clip-path, но приём с рамкой встречается во многих проектах.

border, outline и box-shadow

Если рамка появляется только при наведении или фокусе, бери outline или тень: border добавит пиксели и сдвинет соседние элементы.

border или outline

Частые ошибки

• Задают толщину и цвет, но забывают стиль — рамки нет.
• Добавляют рамку при наведении через border, и соседние элементы прыгают.
• Не учитывают рамку в ширине: блок с width: 100% вылезает за родителя.
• Ставят рамку каждому абзацу и карточке — интерфейс становится шумным.
• Пишут double толщиной 1px, и вторая линия не видна.

Доступность

Рамка полей формы должна быть заметной: контраст границы поля с фоном не ниже 3:1, иначе люди со слабым зрением не видят, где поле. Не передавай состояние только цветом рамки (красная — ошибка): добавь текст. Для фокуса не убирай outline без замены.

Поддержка браузерами

border и все его части работают во всех браузерах. Логические свойства border-block и border-inline поддерживаются актуальными версиями. То, что outline повторяет border-radius, появилось в браузерах недавно — в старых версиях он рисуется прямоугольником.

.card { border: 1px solid #e5e7eb; border-radius: 12px; }
.quote { border-left: 4px solid #2a62d9; padding-left: 16px; }
.tab { border-bottom: 2px solid transparent; }
.tab.is-active { border-bottom-color: #2a62d9; }
.list li:not(:last-child) { border-bottom: 1px solid #e5e7eb; }