Стороны границ CSS

Граница CSS - Отдельные стороны

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

В CSS также есть свойства для указания каждой границы (вверху, справа, внизу и влево):

Пример

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 имеет три значения:

• стиль границы: пунктирный сплошной двойной;
• верхняя граница пунктирная
• правая и левая границы твердые
• нижняя граница двойная

Если свойство 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; }