CSS границы
Свойства границы CSS позволяют указать стиль, ширину и цвет границы элемента.
У меня границы со всех сторон.
У меня красная нижняя граница.
У меня закругленные границы.
Стиль границы CSS
Свойство border-styleуказывает, какую границу отображать.
Допускаются следующие значения:
dotted- Определяет пунктирную границуdashed- Определяет пунктирную границуsolid- Определяет сплошную границуdouble- Определяет двойную границуgroove- Определяет трехмерную рифленую границу. Эффект зависит от значения цвета границыridge- Определяет трехмерную ребристую границу. Эффект зависит от значения цвета границы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;}
Результат:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Примечание. Ни одно из ДРУГИХ свойств границы CSS (о которых вы узнаете больше в следующих главах) не будет иметь НИКАКОГО эффекта, если
border-styleсвойство не установлено!