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;
- верхняя граница пунктирная
- правая граница сплошная
- нижняя граница двойная
- левая граница пунктирная
Если свойство 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;
}
Попробуйте сами »
Свойство border-style свойство используется в приведенном выше примере.
Однако он также работает с border-width и border-color.