CSS border-style

❮ Назад Далее ❯

Свойство border-style

Из примеров на предыдущих страницах учебника вы узнали, что для каждой стороны можно задать разные границы.

В 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.

❮ Назад Далее ❯

Сообщить об ошибке

Перевод страницы