Zaokrąglanie rogów w CSS 3

CSS 3 i HTML 5 na dobre zadomowił się na naszych komputerach. Obecnie można bez większych obaw stosować tą technologię 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 funkcja border-radius 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:

Omawiana technika działa na wszystkich przeglądarkach interpretujących CSS 3: Internet Explorer 9 (lub wyższy), Opera, Chrome, Safari.

Border-radius, CSS, CSS 3, Kaskadowe arkusze stylów, Tworzenie stron WWW, Zaokrąglanie rogów