CSS3
Abgerundete Ecken
Endlich wurde CSS mit dem Feature "Abgerundete Ecken" erweitert. In der Vergangenheit musste man auf Hintergrund-Grafiken etc. zurückgreifen, wenn der Effekt auch in alten Browsern (IE 6-8) funktionieren soll würde ich es dabei belassen. Doch für die neuen Browser funktioniert die Border-Radius Funktion perfekt.
So geht´s:
-moz-border-radius: 20px;
border-radius: 20px;
border-radius: 20px;
Damit der Effekt auch richtig dargestellt wird darf man natürlich nicht die Style Tags vergessen.
<style type="text/css">
[Code]
</style>
[Code]
</style>
Alle Varianten
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius : 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 20px;