Стиль borderColor Свойство
Пример
Измените цвет четырех границ элемента <div> на красный:
document.getElementById("myDiv").style.borderColor = "red";
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство borderColor задает или возвращает цвет границы элемента.
Это свойство может принимать от одного до четырех значений:
- Одно значение, например: p {border-color: red} — все четыре границы будут красными.
- Два значения, например: p {border-color: red Transparent} - верхняя и нижняя границы будут красными, а левая и правая границы будут прозрачными.
- Три значения, например: p {border-color: red green blue} - верхняя граница будет красной, левая и правая границы будут зелеными, нижняя граница будет синей.
- Четыре значения, например: p {border-color: red green blue yellow} — верхняя граница будет красной, правая — зеленой, нижняя — синей, левая — желтой.
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
| Property | |||||
|---|---|---|---|---|---|
| borderColor | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Синтаксис
Вернуть свойство borderColor:
object.style.borderColor
Задайте свойство borderColor:
object.style.borderColor = "color|transparent|initial|inherit"
Значения свойств
| Value | Description |
|---|---|
| color | Specifies the color of the border. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element |
| transparent | The color of the border is transparent (underlying content will shine through) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Технические детали
| Значение по умолчанию: | текущий цвет |
|---|---|
| Возвращаемое значение: | Строка, представляющая цвет границы элемента. |
| CSS-версия | CSS1 |
Дополнительные примеры
Пример
Измените цвет верхней и нижней границы на зеленый, а левой и правой границы на фиолетовый для элемента <div>:
document.getElementById("myDiv").style.borderColor = "green purple";
Пример
Вернуть цвет границы элемента <div>:
alert(document.getElementById("myDiv").style.borderColor);
Связанные страницы
Учебное пособие по CSS: граница CSS
Справочник по CSS: свойство border-color
Справочник по HTML DOM: свойство границы