Afgeronde hoeken in alle webbrowsers

Afgeronde hoeken zijn voor veel webontwikkelaars een alledaags probleem. Het is technisch gezien namelijk niet eenvoudig om schaalbare vlakken te voorzien van afgeronde hoeken. Toch verwerken grafische ontwerpers regelmatig afgeronde hoeken in hun ontwerpen. Dat is ook niet zo gek, want websites met afgeronde hoeken hebben vaak een elegante en vriendelijke uitstraling.

Met de ontwikkeling van allerlei webtechnieken wordt het gelukkig steeds eenvoudiger om afgeronde hoeken te implementeren. Met behulp van CSS3, een techniek voor de vormgeving van website, is het bijvoorbeeld al mogelijk om afgeronde te hoeken maken. Een voorbeeld:

p.important {
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari and chrome */
    -khtml-border-radius: 10px; /* Linux browsers */
    border-radius: 10px; /* CSS3 */
}

Helaas wordt dit nog niet ondersteund in de veel gebruikte webbrowser Internet Explorer 7 en 8. Ik kwam echter vrij recent een oplossing voor dit probleem tegen. Webontwikkelaar Remiz Rahnas heeft namelijk een “HTC behavior” script ontwikkeld waarmee je ook eenvoudige afgeronde hoeken in Internet Explorer kunt implementeren. Je kunt dit script eenvoudig activeren op de volgende manier:

p.important {
    behavior: url(“border-radius.htc”)
}

Het script controleert of er een CSS3 eigenschap “border-radius” aanwezig is in de CSS. Vervolgens voorziet het script de betreffende elementen van afgeronde hoeken. De abstracte wijze waarop deze oplossing is neer gezet bevalt me erg goed. Ik ben erg benieuwd hoe dit script in de praktijk te gebruiken zal zijn. Heb jij ervaring met dit script en/of een andere oplossing voor afgeronde hoeken in Internet Explorer?