Границы CSS

Свойства границы CSS позволяют указать стиль, ширину и цвет границы элемента.

Стиль границы CSS

Свойство border-style определяет, какой тип границы следует отображать.

Допускаются следующие значения:

dotted- Определяет пунктирную границу
dashed- Определяет тореную границу
solid- Определяет твердую границу
double- Определяет двойную границу
groove- Определяет трехмерную рифленую границу. Эффект зависит от значения цвета границы
ridge- Определяет 3D-рамку с рипи. Эффект зависит от значения цвета границы
inset- Определяет 3D-границу встройки. Эффект зависит от значения цвета границы
outset- Определяет 3D-границу начала. Эффект зависит от значения цвета границы
none- Не определяет границу
hidden- Определяет скрытую границу

Свойство border-style может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы).

Пример

Демонстрация различных стилей границ:

p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}

Примечание: Ни одно из ДРУГИХ свойств границы CSS (о которых вы узнаете больше в следующих главах) не будет иметь НИКАКОГО эффекта, если не будет установлено свойство в border-style!