<div style="border: 3px solid #c0d2de;">Мышь</div>В значении свойства border стоит сначала толщина (3px), затем стиль (solid) и в конце указан цвет (#c0d2de;). Результат будет таким:
Свойство border универсальное. Поэтому если открыть редактор CSS кода в браузере (читайте об этом в статье «Редактор CSS в вашем браузере»), то можно увидеть стрелочку перед значением свойства:
Если кликнуть на эту стрелочку, то выпадет весь список свойств, которые задаются этой строкой:
Как можно увидеть, в списке перечисляются все четыре границы (-right-, -left-, -top-, -bottom-). И каждой из границ задаётся одно и то же значение свойств.
Выделим и разбёрем основные свойства: border-color, border-style, border-width. Обратите внимание, что бесполезно задавать только одно из этих свойств, но не ставить остальные. Необходимо одновременно задать толщину рамки. стиль и цвет, чтобы у элемента появилась рамка. Иначе рамки не будет. Поэтому эти свойства бесполезны по отдельности.
Стиль рамки (border-style)
Разберём на примерах различные значения свойства border-style:
— нет границ (толщина границ равна нулю)
— нет границ (то же самое, что и none)
— граница в виде точек
— граница в виде штрихов
— сплошная линия
— двойная сплошная линия
— линия в виде канавки или паза
— противоположность к groove
— рамка с тенью с одной стороны
— противоположность к inset — тень с другой стороны
Толщина рамки (border-width)
Значение свойства border-width задаётся в пикселях или в названии толщины. К примеру:
- «thin» = 2 px
- «medium» = 4 px
- «thick» = 6 px
Примеры использования:
<div style="border: 3px solid #c0d2de;">Мышь</div>
<div style="border: thick solid #c0d2de;">Мышь</div>
Цвет рамки (border-color)
Свойство border-color окрашивает рамку в определённый цвет. Значение этого свойства задаётся аналогично значению свойства «color», то есть через RGB, HEX или через название цвета (читайте больше в статье «Цвет текста (color)»).
Скругление краёв (border-radius)
Существует свойство «border-radius», которое часто используют на сайтах. Оно делает скругление краёв. В качестве значения ему можно задавать как пиксели, так и проценты. Приведём пример:
<div style="border: 3px solid #c0d2de; border-radius: 8px;">Мышь</div>Получится такой результат
А если задать значение в процентах, то можно получить овал, задав значение скругления в 50%:
<div style="border: 3px solid #c0d2de; border-radius: 50%;">Мышь</div>Результат будет таким:
Как и с остальными свойствами в этой статье, чтобы увидеть результат скругления, нужно задать значения для всех трёх свойств: border-style, border-width, border-color.
