Kurs HTML

9.10. Szerokość obramowania (border-width)

Strona główna > Kurs CSS > Rozdział 9: Tła i Obramowania > Szerokość obramowania (border-width)

Wprowadzenie: Definiowanie grubości linii

Obramowanie elementu (border) składa się z trzech podstawowych aspektów: szerokości (grubości), stylu linii oraz koloru. Właściwość border-width służy do określania **grubości** linii obramowania.

Sama właściwość border-width nie wystarczy, aby obramowanie było widoczne. Musi być również ustawiony styl obramowania (border-style) na wartość inną niż none (domyślna).

Wartości border-width

Właściwość border-width może przyjmować:

  • Słowa kluczowe:
    • thin: Cienkie obramowanie (zazwyczaj 1px, ale zależy od przeglądarki).
    • medium: Średnie obramowanie (domyślne, zazwyczaj 3px).
    • thick: Grube obramowanie (zazwyczaj 5px).
  • Wartości długości: Dowolna jednostka długości CSS, np. px, em, rem. Najczęściej używa się pikseli (px). Wartości nie mogą być ujemne. Np. border-width: 2px;, border-width: 0.1em;.
<div class="box width-example thin-border">thin</div>
<div class="box width-example medium-border">medium (domyślne)</div>
<div class="box width-example thick-border">thick</div>
<div class="box width-example px-border">4px</div>
<div class="box width-example em-border">0.2em</div>
.width-example {
  padding: 15px;
  margin-bottom: 10px;
  border-style: solid; /* Styl musi być ustawiony, aby szerokość była widoczna */
  border-color: navy;
}

.thin-border   { border-width: thin; }
.medium-border { border-width: medium; }
.thick-border  { border-width: thick; }
.px-border     { border-width: 4px; }
.em-border     { border-width: 0.2em; font-size: 1.2em; /* Grubość zależy od rozmiaru czcionki */ }

Ustawianie szerokości dla poszczególnych krawędzi

Podobnie jak w przypadku padding i margin, można ustawić różną szerokość dla każdej z czterech krawędzi obramowania za pomocą jednej właściwości border-width, podając od jednej do czterech wartości:

  • Jedna wartość: (np. border-width: 2px;) - Wszystkie cztery krawędzie mają tę samą szerokość.
  • Dwie wartości: (np. border-width: 5px 10px;) - Pierwsza wartość dla górnej i dolnej krawędzi, druga dla lewej i prawej.
  • Trzy wartości: (np. border-width: 2px 6px 10px;) - Pierwsza dla górnej, druga dla lewej i prawej, trzecia dla dolnej.
  • Cztery wartości: (np. border-width: 1px 3px 5px 7px;) - Kolejno: górna, prawa, dolna, lewa (zgodnie z ruchem wskazówek zegara).
.multi-width-border {
  border-style: solid;
  border-color: purple;
  /* Góra: 2px, Prawa: 4px, Dół: 6px, Lewa: 8px */
  border-width: 2px 4px 6px 8px; 
  padding: 20px;
}

Istnieją również indywidualne właściwości do ustawiania szerokości konkretnej krawędzi:

  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width

Każda z nich przyjmuje tylko jedną wartość (słowo kluczowe lub długość).

.individual-widths {
  border-style: solid;
  border-color: green;
  border-top-width: thick;
  border-right-width: 1px;
  border-bottom-width: 8px;
  border-left-width: medium;
  padding: 20px;
}

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Nadaj elementowi div ciągłe obramowanie (border-style: solid;) o grubości thick.

Rozwiązanie:

HTML:

<div class="thick-solid-border">Grube, ciągłe obramowanie</div>

CSS:

.thick-solid-border {
  padding: 15px;
  border-style: solid;
  border-width: thick;
  border-color: tomato; /* Dodajmy kolor dla lepszej widoczności */
}

Efekt: Element będzie miał grube (prawdopodobnie 5px), ciągłe obramowanie w kolorze pomidorowym.

Zadanie 2 (do samodzielnego wykonania)

Nadaj elementowi div obramowanie, które będzie miało 10px grubości na górze i na dole, oraz 2px grubości po bokach. Użyj jednej właściwości border-width.

Zadanie 3 (do samodzielnego wykonania)

Użyj indywidualnych właściwości (border-top-width, border-right-width itd.), aby nadać elementowi div obramowanie o różnej grubości na każdej krawędzi (np. 1px, 2px, 3px, 4px).

FAQ - Najczęściej zadawane pytania

Jaka jest domyślna wartość border-width?

Domyślną wartością jest medium. Jednakże, ponieważ domyślną wartością dla border-style jest none, obramowanie o średniej grubości nie będzie domyślnie widoczne.

Czy mogę użyć wartości procentowych dla border-width?

Nie, wartości procentowe nie są dozwolone dla border-width. Należy używać słów kluczowych (thin, medium, thick) lub jednostek długości (px, em, rem itp.).

Co się stanie, jeśli ustawię border-width, ale nie ustawię border-style?

Obramowanie nie będzie widoczne. Właściwość border-style musi być ustawiona na wartość inną niż none (np. solid, dashed, dotted), aby obramowanie o określonej szerokości i kolorze mogło zostać narysowane.

Jak border-width wpływa na całkowity rozmiar elementu?

Szerokość obramowania jest dodawana do wymiarów elementu, chyba że używasz box-sizing: border-box;. Przy domyślnym box-sizing: content-box;, element o width: 100px; i border-width: 5px; będzie miał całkowitą szerokość 110px (100px + 5px lewego obramowania + 5px prawego obramowania).