Кое-что интересное о CSS-свойстве border

Несмотря на годы веб-разработки и чтения тематических блогов и книг по CSS, я по-прежнему сталкиваюсь с неизвестными возможностями давно знакомых CSS-свойств.

Возможно это моя вина, я человек привычки, и никогда не рассматирваю подробно вещи, которые мне давно знакомы.

Так, во время чтения книги Smashing Book 2, в главе Кристиана Хейлмана был приведен пример следующего CSS-кода:

[css]
#pagetitle {
border-color: black white white black;
}
[/css]

Первое, о чем я подумал: «Это какая-то ошибка. С каких пор свойство border-color позволяет в сокращенной форме указывать цвет для каждой границы блока?». А затем, я вспомнил, что за 10 лет разработки, я использовал это свойство один или два раза, следовательно, что я могу о нем знать? Плюс, я думаю что Кристиан, как опытный разработчик, знает о чем говорит.

Фактически, каждый раз, когда мне нужно было указать цвет границы, я использовал сокращенную версию свойства border, вот так:

[css]
#pagetitle {
border: solid 1px black;
}
[/css]

Редко когда мне действительно приходится использовать свойства типа: border-color, border-style, border-left-style или любые другие версии этих длинных свойств. В 99% случаев, свойство border реализует все, что мне требуется.

В CSS-справочнике на sitepoint.com сказано:

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

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

Стиль и ширина границы

Это правило работает также для свойств border-style и border-width, так что вы можете указать разную толщину и стиль границы для каждой из сторон элемента.

Ну и конечно, вы можете сокращать свойства, при необходимости:

[css]
#pagetitle {
border-width: 2px 1px;
border-style: solid dashed;
}
[/css]

Снова, также как у margin и padding, мы указываем только первые два значения, а остальные просто наследуются от первых.

Запомните

Нельзя использовать эту технику мульти-объявления для сокращенного CSS-свойства border (несмотря на то, что это кажется вполне логичным). Оно применяется только к трем, указанным выше, свойствам, так что следующий код будет неправильным:

[css]
#pagetitle {
/* THIS IS INVALID! */
border: solid dashed 1px 2px black white white black;
}
[/css]

Еще, такой метод не получится применить к свойствам outline-width, outline-style и outline-color.

Перевод статьи «Here’s Something Interesting About CSS Borders», автор Louis Lazaris