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