Rozdział 2 · Zadanie 5

Obramowanie (border)

Linia wokół elementu: grubość, styl, kolor — trzema wartościami naraz.

Zadanie

Dodaj do style.css:

style.css

.box {
  border: 2px solid #0066cc;
}

A w styles-demo.html

Dodaj:

styles-demo.html

<p class="box">Ten tekst jest otoczony ramką</p>

Jak to czytać

border: 2px solid #0066cc; — grubość, styl linii, kolor, oddzielone spacją.

Style linii

dashed — kreskowana, dotted — kropkowana, double — podwójna. Spróbuj: border: 3px dashed #ff6600;

Zaokrąglone rogi

Dodaj jeszcze jedną właściwość: border-radius: 12px; — im większa liczba, tym mocniejsze zaokrąglenie.

Kurs powstał dzięki wsparciu biura rachunkowego Galakton, Białystok, Polska