CSS Границы
Свойства CSS Border - Граница
CSS свойства border позволяют указать стиль, ширину и цвет границы элемента.
У меня границы со всех сторон.
У меня красная нижняя граница.
У меня округлые границы.
Стиль CSS Границы
Свойство border-style определяет, какую границу отображать.
Допускаются следующие значения:
dotted- Определяет точечную границу.dashed- Определяет пунктирную границу.solid- Определяет сплошную границу.double- Определяет двойную границу.groove- Определяет трехмерную рифленую границу. Эффект зависит от значения цвета границы.ridge- Определяет трехмерную ребристую границу. Эффект зависит от значения цвета границы.inset- Определяет внутреннюю трехмерную границу. Эффект зависит от значения цвета границы.outset- Определяет наружную трехмерную границу. Эффект зависит от значения цвета границы.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!
