Hoe kan ik op een HTML-pagina met twee div's de boven- en onderkant van de pagina ronde hoeken geven?

De meeste moderne browsers ondersteunen CSS3, dat de eigenschap border-radius kent om ronde hoeken mee te maken:

.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}

Dit werkt niet in oudere browsers, maar voor de meeste browsers is dat geen probleem, die houden zichzelf min of meer up to date, of sporen de gebruiker aan om te updaten.

Voor IE8 en ouder kun je gebruik maken van een hack:

Eerst dit downloaden en op je site zetten:

http://code.google.com/p/curved-corner/

Vervolgens in CSS dit gebruiken:

.rounded-corners {
behavior: url(/css/border-radius.htc);
border-radius: 20px;
}

Voor ouder Opera's is er een round corner generator:

http://a.deveria.com/roundgen/


(ik voeg ook de bron van funkeydogz even toe)