Back to frontpage
Hét vraag- en antwoordplatform van Nederland

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

Het liefst zou ik dit willen doen met behulp van CSS.

Toegevoegd na 1 minuut:
(is volgens mij ook de enige mogelijkheid).

Verwijderde gebruiker
12 jaar geleden
952
Verwijderde gebruiker
12 jaar geleden
Ja! Als je het als een antwoord neerzet zal ik het als beste antwoord aangeven.
Verwijderde gebruiker
12 jaar geleden
Alleen links gelden ook niet als antwoord. ;)
Verder is het wel handig om te weten dat CSS3 niet door alle browsers ondersteund word. (IE8 en lager werkt niet.)
Verwijderde gebruiker
12 jaar geleden
Dat valt tegen hoor. Er zijn genoeg leken die net een computer aan kunnen zetten en een internet scherm kunnen openen... Die updaten hun browser niet zo snel. Daarnaast zijn ze in arme landen ook meestal niet zo up-to-date. Je kunt natuurlijk niet met iedereen rekening houden, maar als je een redelijk groot publiek hebt, is het toch wel aan te raden om je website goed werkend te krijgen voor IE 7 en hoger. (IE 7 is de standaard browser voor XP computers met service pack 2).

Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier.

Het beste antwoord

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)
(Lees meer...)
Bronnen:
rose
12 jaar geleden

Weet jij het beter..?

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

0 / 5000
Gekozen afbeelding
+