border-color
Ustawia kolor obramowania.
- Wartość domyślna
currentcolor- Dziedziczona
- Nie
- Animowalna
- tak, jako kolor
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.borderColor = "#f59e0b"
Przykład
#.option {
border: 2px solid transparent;
}
.option:hover {
border-color: #a78bfa;
}<div class="option stage" style="border-radius: 12px; cursor: pointer;">Najedź kursorem, a pojawi się obramowanie bez przesunięcia treści</div>Definicja i zastosowanie
#Właściwość border-color nadaje kolor linii obramowania. Przyjmuje każdy format koloru CSS: nazwy, zapis szesnastkowy, rgb(), hsl() i nowsze przestrzenie barw.
Domyślnie obramowanie ma kolor tekstu (currentcolor). Dzięki temu zmiana color elementu zmienia jednocześnie kolor jego obramowania, o ile nie ustawiono go osobno.
Można podać od jednej do czterech wartości, żeby pokolorować krawędzie różnie. Wartość transparent przydaje się do rezerwowania miejsca pod obramowanie, które pojawi się później.
Składnia
#border-color: <kolor> (1–4 wartości);Wartości
#- Kolor tekstu elementu, tu błękitny z właściwości
color. <kolor>
Dowolny kolor, tu bursztynowy.dwie wartości
Pierwsza dla góry i dołu, druga dla boków.- Przezroczyste obramowanie: zajmuje miejsce, ale go nie widać.
Wartości w praktyce
#currentcolor
color..demo { border-color: currentcolor; }#f59e0b
.demo { border-color: #f59e0b; }#f43f5e #10b981
.demo { border-color: #f43f5e #10b981; }transparent
.demo { border-color: transparent; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Ustaw przezroczyste obramowanie w stanie spoczynku, a kolor dopiero w
:hover. Treść nie będzie wtedy skakać. - Dla zgodności z motywem kolorów używaj zmiennych CSS, na przykład
border-color: var(--border).
Powiązane hasła
#- borderSkrót, który ustawia grubość, styl i kolor obramowania.
- border-styleUstawia styl linii obramowania: ciągła, przerywana, kropkowana i inne.
- colorUstawia kolor tekstu i domyślny kolor obramowań, dekoracji oraz ikon SVG z currentcolor.
- outlineRysuje obwódkę wokół elementu, która nie zajmuje miejsca w układzie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.