Границы (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, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: