Heb je al wel eens een ontwerp gehad met ronde hoeken en je kende als enige oplossing hiervoor het invoegen van afbeeldingen, dan zal ik je bij deze verlossen van deze inefficiënte manier van werken.
CSS3 komt eraan, en daarmee zal ook de border-radius CSS property beschikbaar worden. Met border-radius kan je instellen hoe rond een hoek van een element moet zijn. Er zijn 2 varianten, want zowel -webkit als -moz omdat elk hun eigen property geïmplementeerd hebben.
Wil je een div met bovenaanrechts een ronde hoek, dan kan je dit als volgt in je CSS implemeneteren:
#mijndiv {
-moz-border-radius-topleft: 7px;
-webkit-border-top-left-radius: 10px;
}
<div id="mijndiv">inhoud div</div>
Let wel op met deze property, want die is momenteel nog niet in alle browsers beschikbaar, zelfs de nieuwe IE8 ondersteund de property nog niet, daarnaast zijn er een aantal oudere browsers, die deze property niet ondersteunen.
Voor deze browsers kun je volgens mij het best dd_roundies javascript plugin gebruiken, met deze script kan je zeer makkelijk voor andere browsers ronde hoeken gaan maken.
Onderstaande script voeg je toe in de header van je pagina en hiermee zal je ook een border rechtsboven met een radius van 10pixels maken.
<script src=”DD_roundies_0.0.2a-min.js” type=”text/javascript”></script>
<script type=”text/javascript”>DD_roundies.addRule(‘#footertext’, ‘0px 10px 0px 0px’);</script>
Let op! De plugin werkt door middel van VML en dat kan niet meer in IE8, via een eenvoudige meta tag kan je als render engine IE7 instellen, zodanig dat IE8 eigenlijk dezelfde render engine als IE7 gebruikt.
<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />
De plugin lijkt redelijk goed zijn werk te doen, maar in IE geeft hij soms problemen, ook bij afdruk pagina’s verschijnen er soms nog elementen op de pagina die er niet zouden moeten staan.