border-color

Браузер	Internet Explorer				Chrome				Opera			Safari				Firefox
Версия	6.0	7.0	8.0	9.0	2.0	3.0	4.0	5.0	9.2	9.6	10	2.0	3.1	4.0	5.0	2.0	3.0	3.6	4.0
Поддержка

Краткая информация

CSS	CSS1+
Значение по умолчанию	Нет
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	открыть в новой вкладке

Описание

Устанавливает цвет границы на разных сторонах элемента. Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.

Синтаксис

border-color: [цвет | transparent] {1,4} | inherit

Аргументы

Цвет можно задавать тремя способами.

1. По его названию

Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.

3. С помощью RGB

Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении.

transparent - Устанавливает прозрачный цвет.

inherit - Наследует значение родителя.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Результат зависит от количества и указан в табл. 1.

Число значений

Результат

Цвет границы будет установлен для всех сторон элемента.

Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой.

Первое значение задает цвет верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.

Поочередно устанавливается цвет верхней, правой, нижней и левой границы.

Табл. 1. Изменение цвета в зависимости от числа значений

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



      <html>

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

      <title>border-color</title>

      <style type="text/css">

      H1{

  border-color: red white;  /*Цвет границы*/

  border-style: solid;  /*Стиль границы*/

  }
P{

  border-color: #008a77;  /*Цвет границы*/

  border-style: solid;  /*Стиль границы*/

  padding: 5px;  /*Поля вокруг текста*/

  }

  </style>

  </head>

  <body>

   <div id="panel">

   <p id="title">Lorem ipsum dolor sit amet</p>

   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
 
     sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
 
     aliguam erat volutpat.</p>

 </div> 


    </body>

    </html>

Демонстрация примера

Объектная модель

[window.]document.getElementById("elementID")style.borderColor

border-color

Категории

Последние комментарии

	Русский
	English