CSS Стороны границ
CSS border - отдельные стороны
Из примеров на предыдущих страницах учебника вы узнали, что для каждой стороны можно задать разные границы.
В CSS также есть свойства border
для указания каждой из границ отдельно (верхняя, правая, нижняя и левая):
border-top-style
border-right-style
border-bottom-style
border-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
.