Границы (border, border-style, border-width, border-color, border-radius)

CSS свойство border - это универсальное свойство. Через его значение можно задать сразу несколько свойств: толщину границы, стиль и цвет. В коде это будет выглядеть так:
<div style="border: 3px solid #c0d2de;">Мышь</div>
В значении свойства border стоит сначала толщина (3px), затем стиль (solid) и в конце указан цвет (#c0d2de;). Результат будет таким:
Мышь
Свойство border универсальное. Поэтому если открыть редактор CSS кода в браузере (читайте об этом в статье "Редактор CSS в вашем браузере"), то можно увидеть стрелочку перед значением свойства: Если кликнуть на эту стрелочку, то выпадет весь список свойств, которые задаются этой строкой: Как можно увидеть, в списке перечисляются все четыре границы (-right-, -left-, -top-, -bottom-). И каждой из границ задаётся одно и то же значение свойств.
Если в названии свойств не ставить -right-, -left-, -top-, -bottom-, то значение свойств border-* будут автоматически применено ко всем четырём границам.
Выделим и разбёрем основные свойства: border-color, border-style, border-width. Обратите внимание, что бесполезно задавать только одно из этих свойств, но не ставить остальные. Необходимо одновременно задать толщину рамки. стиль и цвет, чтобы у элемента появилась рамка. Иначе рамки не будет. Поэтому эти свойства бесполезны по отдельности.

Стиль рамки (border-style)

Разберём на примерах различные значения свойства border-style:

none
- нет границ (толщина границ равна нулю)

hidden
- нет границ (то же самое, что и none)

dotted
- граница в виде точек

dashed
- граница в виде штрихов

solid
- сплошная линия

double
- двойная сплошная линия

groove
- линия в виде канавки или паза

ridge
- противоположность к groove

inset
- рамка с тенью с одной стороны

outset
- противоположность к 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.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, покупка SSL сертификатов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: