Kurs HTML

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;
}