Styl obramowaniaWłaściwość koloru
Przykład
Zmień kolor czterech obramowań elementu <div> na czerwony:
document.getElementById("myDiv").style.borderColor = "red";
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość borderColor ustawia lub zwraca kolor obramowania elementu.
Ta właściwość może przyjmować od jednej do czterech wartości:
- Jedna wartość, np.: p {border-color: red} - wszystkie cztery ramki będą czerwone
- Dwie wartości, np.: p {border-color: red transparent} - górna i dolna ramka będą czerwone, lewa i prawa ramka będą przezroczyste
- Trzy wartości, takie jak: p {border-color: red green blue}- górna ramka będzie czerwona, lewa i prawa ramka będzie zielona, dolna ramka będzie niebieska
- Cztery wartości, np.: p {border-color: red green blue yellow} - górna ramka będzie czerwona, prawa ramka będzie zielona, dolna ramka będzie niebieska, lewa ramka będzie żółta
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
| Property | |||||
|---|---|---|---|---|---|
| borderColor | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Składnia
Zwróć właściwość borderColor:
object.style.borderColor
Ustaw właściwość borderColor:
object.style.borderColor = "color|transparent|initial|inherit"
Wartości nieruchomości
| 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 |
Szczegóły techniczne
| Domyślna wartość: | aktualny kolor |
|---|---|
| Wartość zwrotu: | String, reprezentujący kolor obramowania elementu |
| Wersja CSS | CSS1 |
Więcej przykładów
Przykład
Zmień kolor górnego i dolnego obramowania na zielony, a lewego i prawego obramowania na fioletowy, elementu <div>:
document.getElementById("myDiv").style.borderColor = "green purple";
Przykład
Zwróć kolor obramowania elementu <div>:
alert(document.getElementById("myDiv").style.borderColor);
Powiązane strony
Samouczek CSS: obramowanie CSS
Odniesienie CSS: właściwość border-color
Odniesienie HTML DOM: border property