Właściwość CSSModel pudełkowy
border-width
Ustawia grubość obramowania.
- Wartość domyślna
medium- Dziedziczona
- Nie
- Animowalna
- tak, jako długość
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.borderWidth = "4px"
Przykład
#CSS
.tab.active {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #a78bfa;
}HTML przykładu
<nav class="stage" style="display: flex; gap: 16px;">
<span class="tab active" style="padding-bottom: 4px">Opis</span>
<span class="tab" style="padding-bottom: 4px">Zadania</span>
<span class="tab" style="padding-bottom: 4px">Opinie</span>
</nav>Podgląd
Definicja i zastosowanie
#Właściwość border-width określa grubość linii obramowania. Przyjmuje długości albo słowa kluczowe thin, medium i thick, których dokładna grubość zależy od przeglądarki.
Jak inne skróty krawędzi, przyjmuje od jednej do czterech wartości: dla wszystkich stron, dla pionu i poziomu albo osobno dla każdej krawędzi.
Grubość jest widoczna tylko wtedy, gdy obramowanie ma styl inny niż none i hidden.
Składnia
#Składnia
border-width: thin | medium | thick | <długość> (1–4 wartości);Wartości
#Wartości w praktyce
#thin
Cienka linia, zwykle 1px.
.demo { border-width: thin; }medium
Średnia linia, zwykle 3px. Wartość domyślna.
.demo { border-width: medium; }thick
Gruba linia, zwykle 5px.
.demo { border-width: thick; }2px 8px
Cienko u góry i na dole, grubo po bokach.
.demo { border-width: 2px 8px; }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
#- Słowa
thin,mediumithickwyglądają nieco inaczej w różnych przeglądarkach. Dla precyzji podawaj piksele. - Sama grubość nic nie da bez
border-style.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.