CSS właściwość border-width

Definicja i zastosowanie

Skrócona właściwość border-width ustawia szerokość wszystkich krawędzi elementu, lub单独地为单独的边框设置宽度.

Działa tylko, gdy styl krawędzi nie jest none. Jeśli styl krawędzi jest none, szerokość krawędzi zostanie rzeczywiście zresetowana do 0. Nie można指定uj negatywnych wartości długości.

Przykład 1

border-width:cienka średnia gruba 10px;
  • Górna krawędź jest cienka
  • Prawa krawędź jest średniej szerokości
  • Dolna krawędź jest gruba
  • Lewa krawędź ma szerokość 10px

Przykład 2

border-width:cienka średnia gruba 10px;
  • Górna krawędź ma szerokość 10px
  • Prawa i lewa krawędź są średniej szerokości
  • Dolna krawędź jest gruba

Przykład 3

border-width:cienka średnia;
  • Górna i dolna krawędź jest cienka
  • Prawa i lewa krawędź są średniej szerokości

Przykład 4

border-width:cienka;
  • Wszystkie 4 krawędzie są cienkie

Przykład

Ustaw szerokość czterech krawędzi:

p
  {
  border-style:solid;
  border-width:15px;
  }

Spróbuj sam

Gramatyka CSS

border-width: średnia|cienka|gruba|length|initial|dziedziczona;

Wartość atrybutu

Wartość Opis
cienka cienka
średnia Domyślna. Definiuje średnią krawędź.
gruba Definiuje grubą krawędź.
length Pozwala na własne dostosowanie szerokości krawędzi.
dziedziczona Określa, że szerokość krawędzi powinna być dziedziczona od elementu nadrzędnego.

Więcej przykładów

Wszystkie atrybuty szerokości krawędzi w jednym deklaracji
Ten przykład pokazuje, jak używać skróconych atrybutów, aby ustawić szerokość wszystkich krawędzi w jednym deklaracji.

Szczegóły techniczne

Domyślna wartość: średnia
Inkrementacja: nie
Wersja: CSS1
Gramatyka JavaScript: obiekt.style.borderWidth="cienka gruba"

Wsparcie przeglądarek

Numeracja w tabeli wskazuje pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Zobacz również:

Kurs CSS:Obramowanie CSS

Przeglądarka DOM HTML:Atrybut borderWidth