Podstawy pracy z granicami w CSS

Teraz nauczymy się dodawać granicę elementom. Robi się to za pomocą trzech właściwości: właściwość border-width ustawia grubość granicy, border-color - kolor, a border-style ustawia typ granicy.

Pierwsze dwie właściwości działają w oczywisty sposób: border-color przyjmuje kolory w tym samym formacie, co właściwość color, a grubość granicy jest podawana w pikselach. A oto właściwość border-style przyjmuje wartości w postaci słów kluczowych. Na przykład, wartość solid ustawia linię ciągłą.

Zróbmy, na przykład, granicę o grubości 3 pikseli, w postaci ciągłej linii, koloru czerwonego:

html<div id="elem"></div>

css#elem {
  border-width: 3px;    /* grubość 3px */
  border-style: solid;  /* w postaci linii */
  border-color: red;    /* kolor czerwony */
  width: 300px;
  height: 100px;
}

Результат:

W kolejnych lekcjach przyjrzymy się pracy z granicami bardziej szczegółowo.