CSS border-radius

CSS border-radius

Właściwość border-radius służy do zaokrąglania narożników elementu HTML, np. akapitu, div-a, przycisku lub obrazka. Im większa wartość, tym bardziej zaokrąglone rogi.

Składnia

p {
  border-radius: 20%;
}

W pytaniu egzaminacyjnym zapis border-radius: 20%; oznacza, że narożniki akapitu są zaokrąglone. Dlatego pasuje do rysunku, na którym ramka ma wyraźnie zaokrąglone rogi.

Najczęstsze jednostki

Wartość border-radius można podawać m.in. w:

• pikselach, np. 10px,
• procentach, np. 20%,
• jednostkach względnych, np. em, rem.

Przykład:

.box {
  border: 2px solid black;
  border-radius: 15px;
}

Zaokrąglanie wybranych narożników

Można ustawić różne promienie dla poszczególnych rogów:

.box {
  border-radius: 10px 20px 30px 40px;
}

Kolejność wartości:

1. lewy górny róg,
2. prawy górny róg,
3. prawy dolny róg,
4. lewy dolny róg.

Ważne na egzaminie

border-radius nie zmienia grubości ani stylu obramowania. Za to odpowiadają inne właściwości, np. border-width, border-style i border-color. border-radius wpływa tylko na kształt narożników elementu.