[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; }

[CHEATSHEET] CSS Elements

http://overapi.com/css/

[CHEATSHEET] CSS

/7 części/

http://www.css.su/