border
Рамка вокруг элемента: толщина, стиль и цвет в одном свойстве.
Синтаксис
border: width style color;Значения
| Параметр | Тип | Описание |
|---|---|---|
| width | length | Толщина: `1px`, `3px`. |
| solid | dashed | dotted | double | keyword | Вид линии; без стиля рамка не рисуется. |
| color | color | Цвет; по умолчанию — цвет текста. |
Примеры
Разные виды линий:
<p style="border: 2px solid royalblue; padding: 8px;">solid</p>
<p style="border: 2px dashed seagreen; padding: 8px;">dashed</p>
<p style="border: 3px dotted crimson; padding: 8px;">dotted</p>Рамка только с одной стороны — border-top, border-right, border-bottom, border-left:
<h3 style="border-bottom: 3px solid gold; padding-bottom: 4px;">Only the bottom border</h3>
<p style="border-left: 4px solid gray; padding-left: 8px;">A quote-like block with a left border.</p>Примечания
Рамка добавляется к размеру элемента, если не задан box-sizing: border-box. Если нужна обводка, которая не занимает места, например при фокусе, берите outline.
См. также
- border-radius — Скругляет углы элемента.
- outline — Обводка вокруг элемента, которая не занимает места и не сдвигает соседей.
- box-sizing — Входят ли в `width` и `height` внутренние отступы и рамка.
- padding — Внутренний отступ между содержимым и рамкой элемента.
Вопросы и ответы по теме
В учебнике
- Фон и рамки — Фоновые картинки, их повтор, размер и положение, виды рамок, скругление углов и outline.