Nu är det jättelätt med rundade hörn i HTML!

Även de absolut enklaste rundade hörnen kan vara riktigt jobbiga att få snygga med HTML om du har höga krav på att det ska se bra ut även i äldre webbläsare.

Rundade hörn med CSS3

I de allra senaste webbläsarna är det superenkelt att skapa rundade hörn. För att få dit dem i CSS3-webbläsare, Firefox och webbkit så lägger man till border-radius, -moz-border-radius respektive -webkit-border-radius i sitt stylesheet på det här viset:

div {
background:#eeeeee;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
}

Rundade hörn i Internet Explorer

Det finns ett gäng olika sätt att få rundade hörn i äldre versioner av IE. Jag väntar precis som ni andra på att äldre versioner av IE ska gå ur tiden så att man kan känna sig säker med CSS3 men till dess får vi lösa det på annat sätt. Många väljer att trixa med bilder eller använder ett javascriptbibliotek för att sätta rundade hörn på vissa objekt. Det snyggaste sättet jag hittat är däremot att infoga en .htc-fil i stylesheetet!

Du laddar ner en vältestad sådan från t ex http://css3pie.com.

Objektet som ska få rundade hörn behöver följande värden:

• behavior med url till .htc-filen (denna sökväg måste vara relativ den sida som stylesheetet läggs in på – säkrast är att göra den absolut).
• position:relative och zoom:1 för att hörnen ska kunna positioneras.
• ha dom vanliga inställningarna för border-radius (för att bättre webbläsare ska slippa använda .htc-filen).

div {
background:#eeeeee;
behavior:url(/Styles/Default/PIE.htc);
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
position:relative;
zoom:1;
}

CSS3 Pie

CSS3 Pie verkar också kunna även hjälpa dig med border-shadow och linear-gradient i Internet Explorer. Lysande!