CSS3 blir allt vanligare i dagens webb. Bland annat finns det nu stöd för border-radius, vilket i stort sett tar bort krånglet med att använda bilder för att få runda hörn. Du kan läsa mer om vad CSS3 har att erbjuda i den här posten: Introduktion till CSS3.

Detta fenomen får du genom border-radius.

/* För firefox */
-moz-border-radius: 10px;
/* För webkit-baserade webbläsare som Safari */
-webkit-border-radius: 10px;

Mycket enklare än massa krångel med bilder, eller hur?

För er med IE…

…som inte kan se exemplet ovan; här är en bild:
border-radius

Olika radius på olika hörn

Firefox och Chrome har även en funktion som låter dig bestämma varje hörn på boxen.

/* För firefox */
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 20px;  

/* För webkit-baserade webbläsare som Safari */
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 5px;

Denna funktion använder jag till datumvisaren på inläggen här på designskolan.

border-radius

Använd det försiktigt

Som jag sa innan; använd bara detta för att snygga till detaljer och låt inte sajten vara beroende av det. Eftersom IE inte stöder CSS3 så är det en väldigt stor del av dina besökare som inte kommer kunna använda sajten fullt ut.

Läs mer om CSS3 och dess funktioner

CSS3 innehåller även funktioner som skugga, bilder som border och transparens. Du kan läsa mer om detta här: