border
Skrót, który ustawia grubość, styl i kolor obramowania.
- Wartość domyślna
medium none currentcolor- Dziedziczona
- Nie
- Animowalna
- tak, grubość i kolor
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.border = "2px solid #a78bfa"
Przykład
#.input {
border: 1px solid #525252;
border-radius: 8px;
}
.input:focus {
border-color: #a78bfa;
}<input class="input" placeholder="Kliknij, żeby zmienić kolor obramowania" style="padding: 8px 12px; width: 100%; outline: none; background: #111;">Definicja i zastosowanie
#Właściwość border łączy trzy właściwości: border-width, border-style i border-color. Wartości podajesz w dowolnej kolejności, na przykład border: 2px solid #a78bfa.
Najważniejszy jest styl. Bez niego obramowanie się nie pojawi, bo domyślny styl to none. Jeśli pominiesz kolor, obramowanie przyjmie kolor tekstu (currentcolor).
Skrót ustawia wszystkie cztery krawędzie naraz. Do pojedynczej krawędzi służą border-top, border-right, border-bottom i border-left, przydatne na przykład przy podkreśleniach i separatorach.
Składnia
#border: <grubość> || <styl> || <kolor>;Wartości
#- Cienka, ciągła, szara linia. Najczęstszy wybór dla kart i pól.
- Grubsza linia przerywana.
- Podwójna linia. Potrzebuje co najmniej 3px grubości, żeby było ją widać.
- Brak obramowania.
Wartości w praktyce
#1px solid #525252
.demo { border: 1px solid #525252; }3px dashed #f59e0b
.demo { border: 3px dashed #f59e0b; }6px double #a78bfa
.demo { border: 6px double #a78bfa; }none
.demo { border: none; }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
#- Obramowanie zmienia rozmiar elementu. Jeśli pojawia się dopiero po najechaniu i powoduje skok układu, ustaw stałe obramowanie w kolorze
transparent. - Do obramowania, które nie wpływa na układ, użyj
outlinealbobox-shadow.
Powiązane hasła
#- border-widthUstawia grubość obramowania.
- border-styleUstawia styl linii obramowania: ciągła, przerywana, kropkowana i inne.
- border-colorUstawia kolor obramowania.
- border-radiusZaokrągla rogi elementu.
- outlineRysuje obwódkę wokół elementu, która nie zajmuje miejsca w układzie.
- border-imageZastępuje zwykłe obramowanie obrazkiem albo gradientem pociętym na narożniki i krawędzie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.