In CSS3 kunnen we straks gaan genieten van een heel eenvoudige manier om elementen met een paar regels in je stylesheet te voorzien van ronde hoeken. Dit kan als volgt met 'border-radius'. Helaas is CSS3 de komende tijd nog geen optie. De belangrijkste browserontwikkelaars snappen dit ook. Daarom is het zowel in Firefox als in Safari mogelijk om ronde hoeken te maken:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Javascript

Maar ja, dat is geen valide code... Wat dan?
Zoals wel vaker is dit het moment waarop Javascript oplossingen kan bieden. Er zijn meerdere oplossingen verkrijgbaar om ronde hoekjes cross-browser toe te passen. Een oplossing die ik recent heb gebruikt voor een Plone website van een klant (de site is nog niet gelanceerd, dus even geen link) heb ik gebruik gemaakt van een mooie plugin voor JQuery: de JQuery corner plugin. Aangezien Plone al vollop gebruik maakt van jQuery, is het gebruik van aanvullende plugins zeer interessant.

Na het toevoegen van de plugin kun je eenvoudig ronde hoeken toepassen op classes en id's in je site:

jq(document).ready(function() {
    /* Set corners */ 
    jq(function(){
        jq("#portal-globalnav").corner();
        jq("#portal-footer").corner("bottom");
    });
});

In dit voorbeeld wordt de #portal-globalnav voorzien van 4 ronde hoeken en de #portal-footer van ronde hoeken aan de onderkant. Voor de oplettende lezer, binnen Plone wordt de $ in jQuery code vervangen door jq.

Zonder jQuery

Helaas bood de plugin voor de vernieuwde site van Thierry Schmitter een probleem: transparantie en achtergrondafbeeldingen. Voor moderne browsers ontstond er geen enkel probleem, maar voor Internet Explorer bleek het weer eens teveel.

Gelukkig kwam ik langs een ander project dat op een soortgelijke manier als de jQuery corner plugin ronde hoeken toevoegd: CurvyCorners. Deze bood wel de transparantie die niet wilde werken in Internet Explorer. Er is alleen wat meer Javascript nodig om de code werkende te krijgen.

    /* Load the curvyCorners */
    addEvent(window, 'load', initCorners);
    
    /* Don't show warning when style isn't found curvyCorners */
    var curvyCornersVerbose = false;
    
    /* Define the corner */
    function initCorners() {
        var settings = {
            tl: { radius: 10 },
            tr: { radius: 10 },
            bl: { radius: 10 },
            br: { radius: 10 },
            antiAlias: true
        }
        /* Apply the corners */
        curvyCorners(settings, ".portletNavigationTree, #portal-column-one, #portal-column-content");
    }

In dit voorbeeld worden er vier hoeken gezet op meerdere elementen: .portletNavigationTree, #portal-column-one, #portal-column-content.