Свойство border: рамки
Как задать толщину, стиль и цвет рамки и учитывать её в размере блока.
Как это работает
border объединяет толщину, стиль и цвет рамки. Для видимой линии обычно нужны все три составляющие, например 1px solid #d4ddd7. Если стиль остаётся none, выбранный цвет не создаст рамку сам по себе.
Рамка входит в геометрию блока и может менять итоговый размер. Для разделителя одной стороны есть border-bottom и другие частные свойства. Обводку фокуса лучше не удалять; outline часто удобнее, потому что не занимает место в раскладке.
Пример в интерфейсе
.card { box-sizing: border-box; width: 260px; border: 2px solid #11694e; padding: 18px; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| solid | Сплошная линия. |
| dashed | Пунктирная рамка. |
| border-bottom | Рамка только снизу. |
| currentColor | Использовать текущий цвет текста. |
На что обратить внимание
Если рамка появляется только при наведении, элементы могут сдвигаться. Зарезервируйте такую же прозрачную рамку в обычном состоянии.
Проверьте на практике
Поменяйте solid на dashed, затем увеличьте толщину. Посмотрите, как border-box сохраняет наружный размер.
Связанные темы: box-sizing, border-radius.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.