[CSS3] Zaokrąglanie narożników

CSS3 pozwala na tworzenie zaokrąglonych elementów. To co kiedyś trzeba było robić za pomocą specjalnie przyciętych obrazków, teraz można zrobić za pomocą stylu CSS. Wszystkie przeglądarki obsługują tą własność poprawnie, więc w tym przypadku nie trzeba posiłkować się prefixami przeglądarek, co zawsze wydłuża definicję styli. W tym krótkim wpisie nauczymy się robić zaokrąglone obramowania dla elementów. Zaokrąglone krawędzie można zaaplikować praktycznie do każdego blokowego elementu HTML. Własność CSS jaka będzie nas interesować w celu zaokrąglenia narożnika elementu to:
[code]border-radius: wartość [px];[/code]
Możemy zaokrąglić wszystkie 4 narożniki, lub tylko któryś z nich, bądż też każdy z nich za pomocą innej wartości. Na początek określmy jedną wartość dla wszystkich rogów. Popatrzmy na przykłady z różnymi kombinacjami. Im więcej pikseli podamy w zaokrągleniu, tym bardziej owalny będzie narożnik. Wszystkie poniższe zaokrąglenia generowane są za pomocą CSS.

border-radius: 25px	border-radius: 5px
div { border-radius: 25px; background: #8AC007; color: #fff; padding: 20px; width: 300px; height: 250px; }	div { border-radius: 5px; background: none; border: 5px solid #8AC007; color: #000; padding: 20px; width: 300px; height: 250px; }
border-radius: 50px	border-radius: 30px
div { border-radius: 50px; background-image:url('monica.jpg'); background-repeat: no-repeat; background-position: left top; border:1px solid #000; padding: 20px; width: 300px; height: 250px; }	div { border-radius: 30px; background-image:url('angelina.jpg'); background-repeat: no-repeat; background-position: left top; border: 5px dotted #8AC007; padding: 20px; width: 300px; height: 250px; }

A teraz zobaczmy jak określić każdy narożnik z osobna. Można to zrobić za pomocą podania wartości dla wszystkich 4 narożników we własności border-radius, lub wykorzystać własności przeznaczone dla każdego narożnika pojedyńczo, czyli:

• border-top-left-radius - lewy górny róg
• border-top-right-radius - prawy górny róg
• border-bottom-right-radius - dolny prawy róg
• border-bottom-left-radius - dolny lewy róg

W przypadku podawania 4 różnych wartości w border-radius, zaczynamy od lewego górnego rogu, następnie każda kolejna wartość odpowiada następnemu rogowi zgodnie z ruchem wskazówek zegara. Przykłady poniżej:

border-radius: 25px 0 0 0	border-radius: 0 25px 0 0
div  { border-radius: 25px 0 0 0; background: #8AC007; color: #fff; padding: 20px; width: 300px; height: 250px;   }	div  { border-radius: 0 25px 0 0; background: #6b9503; color: #fff; padding: 20px; width: 300px; height: 250px;   }
border-radius: 0 0 0 25px	border-radius: 0 0 25px 0
div  { border-radius: 0 0 0 25px; background: #6b9503; color: #fff; padding: 20px; width: 300px; height: 250px;   }	div  { border-radius: 0 0 25px 0; background: #8AC007; color: #fff; padding: 20px; width: 300px; height: 250px;   }