Aux designers web : il est désormais assez courant de faire des bordures arrondies en CSS. Ce n'est pas compliqué, mais voilà ce qu'il faut savoir.

Généralités

Évidement, comme la propriété border-radius: 10px n'est pas supporté telle qu'elle, il faut utiliser à chaque fois :

Bien sûr, c'est lourd comme code. Mais c'est presque obligatoire, car pour le moment, aucun navigateur ne supporte la balise CSS3 officielle.

Mais je pense que l'on peut retirer -webkit-border-radius : en effet, j'ai remarqué que Webkit réagissait aussi sur le code destiné à Khtml. On peut donc réduire le tout à :

Quatre coins avec quatre rayons différents : cas de Webkit

Le code ci-dessus permet de mettre un arrondi aux quatre coins. Le même rayon aux quatre coins.
Mais on peut aussi changer de rayon pour chaque coin. Il suffit d'utiliser le code suivant : border-radius: 10px 20px 30px 40px. Le résultat est :

(Les quatre coins ont un rayon différent.)

Si on veut qu'il soit affichable dans les autres navigateurs, la logique voudrait que le code à insérer soit :
Mais ce serait trop beau. En effet, Safari et Chrome (Webkit) ne reconnaissent pas les 4 valeurs derrière cette propriété. Il faut donc définir chaque coin spécifiquement. Voici le bon code :

Désignation particulière pour Gecko

On vient de voir qu'on pouvait désigner chaque coin par son nom (top-right, top-left, etc.) pour webkit. Et bien on peut aussi le faire avec les autres navigateurs. C'est pratique si on ne veut arrondir qu'un seul coin d'un élément. Mais il faut faire gaffe ! Tous les navigateurs n'utilisent pas les mêmes noms !

Ainsi, dans ce code :

(qui se raccourcirait d'ailleurs en border-radius: 30px 60px 30px 60px; ou même border-radius: 30px 60px;.)
On remarque que les noms sont :
border-top-left-radius pour « en haut à gauche »,
border-top-right-radius pour « en haut à droite »,
border-bottom-right-radius pour « en bas à droite »,
border-bottom-left-radius pour « en bas à gauche ».
Cela paraît logique. C'est la désignation utilisée par la propriété CSS3 elle même et par les moteurs Webkit et Khtml. Pas par Gecko…
Lui, il prend :
-moz-border-radius-topleft pour « en haut à gauche »
-moz-border-radius-topright pour « en haut à droite »
-moz-border-radius-bottomright pour « en bas à droite »
-moz-border-radius-bottomleft pour « en bas à gauche »
Non seulement, les noms des coins ne sont pas les mêmes, mais aussi le nom des coins est à la fin du border-radius. Alors que normalement, il se place entre “border” et “radius”.
La solution de firefox est totalement illogique si l'on compare avec les autres propriétés CSS. Par exemple, on met bien border-top-width avec le “top” au milieu… Enfin bref…

Si on met deux valeurs : cas particulier de Webkit

Comme si ça ne suffisait pas pour les complications, voici un autre truc : si on utilise ce code (je n'ai gardé que ceux de Gecko et ceux de Webkit pour simplifier) :
Webkit considère une élipse

On n'aura pas la même chose si on prend Webkit ou Gecko !

Pour comparer, si on utilise margin: 10px 0; la marge sera de 10px en haut et en bas et de 0px à gauche et à droite. Évidement, la propriété border-radius n'échappe pas à la règle : on aura les coins haut-gauche et bas-droit de 10px et les deux autres non arrondis…

Le point noir, c'est que cela ne marche qu'avec Gecko et Khtml. Webkit ne le voit pas du tout de cette façon !
Ce dernier considère un coin comme la jonction entre deux arrêtes. Si l'on prend le coin en haut à gauche, il possède donc 2 rayons : celui tangent au bord du haut, et celui tangent au coté gauche. Pour lui, c'est donc une ellipse, voyez ci contre :

Dans le cas de Webkit, chaque coin possède donc « un rayon » qui est définie sur « deux composantes ».

Si on applique cela aux 4 coins, on aura quelque chose de bien différents entre Khtml & Gecko d'une part et Webkit d'autre part. Voici ce que donne le code : -moz-border-radius: 30px 60px; -webkit-border-radius: 30px 60px; avec Safari et avec Firefox, utilisant respectivement Webkit et Gecko, vous l'aurez compris :

Bien sûr, on peut aussi avoir l'effet créée par Gecko avec Webkit : il suffit simplement de définir chaque coin séparément.
Et aussi l'effet de Webkit dans Gecko, pour cela il suffit de mettre 2 valeurs de rayon, mais sur un coin précis :

Il est de cette façon simple et rapide de déformer un rectangle. Notez juste que Webkit ne tolère pas que le rayon d'un coin soit très supérieur à la moitié du coté. Par exemple, un div de dimensions 500px par 200px ne pourra avoir un coin avec un rayon de 150px. Si vous le faites, le coin en question ne sera tout simplement pas arrondi !
Astuce : en prenant un div carré, on peut en faire un cercle avec les rayons égales à la moitié du coté ! C'est assez joli. (Le petit calendrier sur le côté gauche de la page est fait ainsi. Tout du moins, avec Safari et Chrome (IE et Opera n'afichent pas les bordures et avec Firefox, vous voyez des truc encore plus étranges :D)

Pour conclure

Je pense que ces explications touchent à leurs fin (c'est pas trop tôt, vous me direz -_-"). Même si vous connaissiez la propriété border-radius, je pense utile de vous faire remarquer ces quelques « pièges ».
Il reste une chose à savoir : pour le moment, il n'existe pas de solutions pour afficher les coins arrondis en CSS pour les navigateurs Opera et Internet Explorer. Vous me reconnaitrez bien si je dis que IE ne risque pas de les supporter avant au moins 50 ans, mais c'est dommage pour Opera. Espérons qu'ils se mettent à le supporter un de ces quatre !

Comme je suis sympa, je crois aussi utile de vous donner les préfixes propres aux navigateurs, dans les codes CSS :

• Pour Gecko (Firefox, …) c'est : -moz-
• Pour Webkit (Safari, Chrome, …) c'est : -webkit-
• Pour Khtml (Konqueror, au passage très très rapide pour les rendu des CSS) c'est : -khtml-
• Pour Presto (utilisé par Opera) : -o-
• Pour Trident (Utilisé par Internet Explorer) : euh… là je ne sait pas :D. Je ne suis même pas sûr qu'il y en ait un. On utilise plutôt les commentaires conditionnels.

L'utilisation de ces préfixes permet d'utiliser des « futures » propriétés CSS, qui ne sont pas encore supportés dans leurs versions finales. Mais il faut savoir que si tous les navigateurs ne les prennent pas en compte, vos pages ne s'afficheront pas de la même façon sous tous les navigateurs. (C'est le cas des mes pages). Elles peuvent aussi rendre vos pages invalides pour le validateur css du W3C.

Mise à jour du 15 Avril 2010

• Opera 10.50 sortie le 2 mars supporte désormais la propriété border-radius. Pas besoin de préfixe.
  La dénomination des noms des coins est la dénomination normale, et il gère les 4 valeurs mis à la suite.

Par exemple :

border-radius: 10px 20px 30px 40px;

• Internet Explorer 9, dont la pré-version est sortie aussi, supporte également la propriété border-radius.