Border-radius
Egenskapen border-radius används för att sätta rundade hörn på ett element. Det här egenskapen kan ta mellan en och fyra grundvärden. Dessa grundvärden består av den vertikala radien, om inget annat anges får den horisontella radien samma värde.
Att ange horisontell radie
Om man anger ett värde, kommer det att gälla för alla hörnen.
Om man anger två värden; Det första gäller för border-top-left-radius och border-bottom-right-radius. Det andra värdet gäller för border-top-right-radius och border-bottom-left-radius. Det vill säga motsatta diagonala hörn.
Om man anger tre värden; Det första gäller för border-top-left-radius. Det andra värdet gäller för border-top-right-radius och border-bottom-left-radius. Det tredje värdet gäller för border-bottom-right-radius.
Om man anger fyra värden; Det första gäller för border-top-left-radius. Det andra värdet gäller för border-top-right-radius. Det tredje värdet gäller för border-bottom-right-radius. Det fjärde värdet gäller för border-bottom-left-radius. Det vill säga värdena går ifrån övre, vänstra hörnet och fortsätter sedan hörn för hörn medsols.
Att ange vertikal radie
Om man vill ange ett annat värde för den vertikala radien, anger man ett "/"-tecken efter värdena som angetts för den horisontella delen. Därefter anges värdena för den vertikala radien. Även här kan man ange mellan ett och fyra värden. Dessa fungerar precis som värdena för den horisontella radien.
Egenskaper
| Parametrar | <längdvärden> | initial | inherit
|
| Defaultvärde | 0
|
| Ärvs? | Nej |
| Animerbart? | Ja |
| Fungerar med... | Alla element |
Längdvärden anger den horisontella radien på avrundningen. Om detta är det enda längdvärdet, kommer det att sättas lika på bägge radierna. Se ovan för hur dessa fungerar
Om man även vill ange vertikal radie, avslutar man den horisontella delen med ett "/"-tecken och därefter anger man de vertikala radierna.
Längderna kan anges med hjälp av alla CSS-måttenheter.