Свойство border
CSS свойство border определяет стиль, ширину и цвет границ элемента.
У меня есть границы со всех сторон.
У меня есть красная нижняя граница.
У меня есть округлые границы.
CSS cвойство border-style
CSS свойство border-style определяет, какую границу отображать.
Допустимы следующие значения:
dotted- определяет границу штрихомdashed- определяет границу пунктиромsolid- определяет границу сплошнойdouble- определяет границу двойнойgroove- определяет 3D границу желобом. Эффект зависит от значение border-colorridge- определяет 3D границу коньком. Эффект зависит от значение border-colorinset- определяет 3D границу вставкой. Эффект зависит от значение border-coloroutset- определяет 3D границу начальной. Эффект зависит от значение border-colornone- определяет без границhidden- определяет скрытые границы
CSS свойство 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;}
Результат:
Штрихованные границы.
Пунктирные границы.
Сплошные границы.
Двойные границы.
Границы желобом. Эффект зависит от значение border-color.
Границы коньком. Эффект зависит от значение border-color.
Границы вставкой. Эффект зависит от значение border-color.
Границы начальные. Эффект зависит от значение border-color.
Границ нет.
Смешанные границы.
Примечание: Ни одно из свойств границ CSS описаны ниже (подробнее об этом вы узнаете в следующих главах) не будут иметь никакого эффекта, если не установлено свойство border-style!