border задаёт рамку элемента: толщину (border-width), стиль линии (border-style) и цвет (border-color) можно указать одной строкой в любом порядке. Но у рамки есть обязательное условие: без явно заданного border-style (dashed, dotted, solid и так далее) рамка не покажется вообще, даже если указаны толщина и цвет.
В этом уроке
Попробуй прямо сейчас: смени border-style на solid, dashed или dotted - или уменьши толщину double до 1px и посмотри, что двойная линия перестанет быть заметна.
Как сделать рамку одной строкой: border-width, border-style, border-color
Сокращённая запись border объединяет три отдельных свойства - border-width (толщина), border-style (стиль линии) и border-color (цвет). В отличие от padding и margin, здесь порядок значений не важен: браузер сам определяет, какое значение к какому свойству относится, по его типу (число с единицей - это ширина, ключевое слово вроде solid - это стиль, а цвет - это цвет). Но border-style обязателен: без него ничего не покажется, даже если ширина и цвет заданы.
border: 2px solid #333; - и border: solid #333 2px; - дадут абсолютно одинаковый результат.
border-width: 5px; border-color: red; без border-style - рамка не покажется вообще, браузер даже не применит указанную толщину.
Цвет рамки по умолчанию: currentColor
Если не указать border-color вовсе, рамка не станет прозрачной или чёрной - она автоматически возьмёт ТЕКУЩИЙ цвет текста элемента (это и называется currentColor). Поэтому если поменять color у элемента, а border-color не трогать, рамка "сама" поменяет цвет вместе с текстом.
color: green; border: 3px solid; - рамка автоматически станет зелёной, той же, что и текст.
Ожидание, что рамка без border-color будет чёрной "по умолчанию" - на самом деле она берёт цвет текста, а не чёрный.
Рамка с одной стороны и разные стили линии
Рамку можно задать только с одной стороны через border-top, border-right, border-bottom или border-left - у каждого своя такая же сокращённая запись из ширины, стиля и цвета. border-style поддерживает несколько видов линии: solid (сплошная), dashed (штрихи), dotted (точки), double (двойная линия). У double есть особенность: чтобы увидеть именно ДВЕ линии с промежутком, рамка должна быть достаточно толстой - при 1px два штриха и зазор между ними физически не помещаются.
border: 6px double black; - при такой толщине хорошо видны обе линии и промежуток между ними.
border: 1px double black; - визуально почти неотличимо от обычной сплошной линии, двойная структура не помещается.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Задают border-width и border-color, но забывают border-style | Рамка не отображается вообще - border-style по умолчанию равен none | Всегда указывать border-style, проще всего - через общую сокращённую запись border |
| Ожидают, что border: 1px double будет чётко видна как двойная линия | При малой толщине два штриха и промежуток между ними физически не помещаются | Для double использовать толщину от 3px и больше |
| Путают border с border-radius, ожидая, что border сам скруглит углы | border задаёт только толщину, стиль и цвет линии - за скругление отвечает другое свойство | Для скруглённых углов нужно отдельное свойство border-radius (отдельная тема) |
| Задают border только с одной стороны, забыв про остальные | Три другие стороны остаются совсем без рамки | Если рамка нужна со всех сторон - использовать общий border, а не border-top/left/right/bottom по отдельности |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| Рамка одной строкой | border: 2px solid #333; |
| Только толщина | border-width: 2px; |
| Только стиль линии | border-style: dashed; |
| Цвет рамки (по умолчанию - цвет текста) | border-color: red; |
| Рамка только снизу | border-bottom: 1px solid #ccc; |
| Двойная линия (нужна толщина от 3px) | border: 6px double black; |
Коротко: отвечаем на вопросы
Почему border не отображается, хотя border-width и border-color заданы?
Самая частая причина - не указан border-style. По умолчанию он равен none, и без явного стиля (solid, dashed, dotted и так далее) рамка не появится вообще, даже если ширина и цвет прописаны. Проще всего задавать все три свойства сразу через сокращённую запись border.
Какого цвета будет рамка, если не указать border-color?
Рамка автоматически возьмёт текущий цвет текста элемента (currentColor), а не станет чёрной или прозрачной. Если поменять свойство color у элемента, рамка без явно заданного border-color поменяет цвет вместе с текстом.
