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

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:

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:

Efekt:

Lewy górny:

Efekt:

Prawy dolny:

Efekt:

Oraz lewy dolny:

Efekt:

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

, , , , ,

  • Zaokrąglanie rogów zawsze było moją udręką, co prawda masz rację, że teraz jest dużo lepiej ale nadal nie jest idealnie i wciąż pamiętam ile przynosiło problemów