Свойство border-color

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

• border-top-color - цвет верхнего сегмента границы;
• border-right-color - цвет правого сегмента границы;
• border-bottom-color - цвет нижнего сегмента границы;
• border-left-color - цвет левого сегмента границы.

• ключевым словом (red, yellow, silver и т.д.);
• шестнадцатеричным кодом цвета в полной форме (#00FFCC, #eeddaa) или сокращенно (#0FC, #EDA);
• десятичным кодом в модели RGB (color: rgb(25, 205, 172)).

В качестве примера раскрасим сегменты границы блока в разные цвета:

Значение свойства border-color, которое является стенографическим, объединяет значения индивидуальных свойств. Единственное (но очень важное!) отличие в том, что вкачестве значения свойства border-color может использоваться ключевое слово transparent. При этом граница будет прозрачной, но все же будет иметь ширину. Данное значение не поддерживается браузерами фирмы Microsoft - в них граница будет иметь либо цвет по умолчанию (черный), если цвет ранее не задавался, либо цвет, унаследованный от родительского элемента.

Свойство border-style

• border-top-style - тип линии верхней границы;
• border-right-style - тип линии правой границы;
• border-bottom-style - тип линии нижней границы;
• border-left-style - тип линии левой границы.

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

• none - граница отсутствует, в результате значение свойства border-width также равно нулю. Это значение используется по умолчанию.
• hidden - подобно значению none, граница отсутствует, за исключением тех случаев, когда такое значение будет применено для таблиц. В этом случае будет использоваться принцип разрешения конфликтов границ; его мы рассмотрим позднее, когда будем изучать работу с таблицами в CSS.
• dotted - граница отображается линией, составленной из точек.
• dashed - граница отображается пунктирной линией.
• solid - граница отображается сплошной линией.
• double - граница отображается двойной сплошной линией. Сумма значений ширины двух линий и расстояния между ними должна быть равна значению свойства border-width. Самая распространенная ошибка при использовании этого значения - задать ширину линии 2 пикселя и стиль double. В этом случае невозможно отобразить двойную линию, так как минимальная возможная ширина линии на экране монитора - 1 пиксель, поэтому для отображения двойной линии и расстояния между ними необходимо минимум 3 пикселя. Соответственно, при ширине в 2 пикселя двойную линию отобразить невозможно. В результате получается обычная сплошная линия, но толщиной в 2 пикселя.
• groove - граница отображается "вдавленной" линией с имитацией объема.
• ridge - противоположно значению groove. Граница отображается "выпуклой" линией с имитацией объема.
• inset - граница отображается так, что весь блок выглядит как бы вдавленным (похоже на нажатую кнопку).
• outset - противоположно значению inset. Весь блок выглядит выпуклым.

Стенографическое свойство border-style по аналогии с border-width позволяет сокращенно записать значения стилей для всех четырех сегментов границы. Оно допускает задание одного, двух, трех или четырех значений. Применение этих значений аналогично свойству border-width.

Страница: - 1 - | - 2 - | - 3 -