CSS Стороны границы
CSS Border - Отдельные стороны
Из примеров на предыдущих страницах вы увидели, что можно указать разные границы для каждой стороны.
В CSS также есть свойства для указания каждой из границ (верхней, правой, нижней и левой):
Пример
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Результат:
Различные стили границы
Пример выше даёт тот же результат, что и этот:
Итак, вот как это работает:
Если свойство border-style имеет четыре значения:
- border-style: dotted solid double dashed;
- верхняя граница dotted
- правая граница solid
- нижняя граница double
- левая граница dashed
Если свойство border-style имеет три значения:
- border-style: dotted solid double;
- верхняя граница dotted
- правая и левая границы solid
- нижняя граница double
Если свойство border-style имеет два значения:
- border-style: dotted solid;
- верхняя и нижняя границы dotted
- правая и левая границы solid
Если свойство border-style имеет одно значение:
- border-style: dotted;
- все четыре границы dotted
Пример
/* четыре значения */
p {
border-style: dotted solid double dashed;
}
/* три значения */
p {
border-style: dotted solid double;
}
/* два значения */
p {
border-style: dotted solid;
}
/* одно значение */
p {
border-style: dotted;
}
Попробуйте сами »
В приведенном выше примере используется свойство border-style. Однако он также работает с border-width и border-color.
