Zaokrąglanie rogów w CSS 3

CSS 3 i HTML 5 na dobre zadomowiły się na naszych komputerach. Obecnie można bez większych obaw stosować te technologie przy budowie stron WWW, a warto bowiem daje nam ona bardzo dużo możliwości w porównaniu do poprzednich wersji.

Fot: Zeno Rocha | CC BY 3.0

Zaokrąglanie rogów jeszcze parę lat temu było dość skomplikowane do wykonania i wymagało pisania skryptów JavaScript, które i tak nie zawsze działały. Dzisiaj w dobie CSS 3 tą operację można wykonać w kilku linijkach.

Za zaokrąglanie narożników odpowiada własność border-radius z CSS 3:

selektor {
     border: 1px solid #ddd;
     border-radius: 5px;
}

Efekt uzyskany za pośrednictwem powyższego kodu (selektor to np. p, div, jakaś klasa lub element id znacznika html):

Oczywiście możemy również zaokrąglić tylko jeden róg:

Prawy górny:

border-top-right-radius: 8px;

Efekt:

Lewy górny:

border-top-left-radius: 8px;

Efekt:

Prawy dolny:

border-bottom-right-radius: 8px;

Efekt:

Oraz lewy dolny:

border-bottom-left-radius: 8px;

Efekt:

Własność border-radius to dziś standard obsługiwany bez prefiksów przez wszystkie współczesne przeglądarki (Chrome, Firefox, Safari, Edge, Opera). Internet Explorer został wycofany przez Microsoft w czerwcu 2022 r.

CSS, CSS 3, Kaskadowe arkusze stylów