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