Créer des arrondis en css

La propriété CSS3 « border-radius » permet aux designers WEB d’utiliser facilement des coins arrondis, sans utiliser des images spécifiques ou l’utilisation de plusieurs div. Il s’agit probablement de l’un des aspects les plus attendus du CSS3.

Voici un exemple basique de coins arrondis :
Le code pour cet exemple est en théorie assez simple

#example1 {
    border-radius: 15px;
}

Cependant, pour le moment, il est nécessaire d’ajouter le préfixe « -moz » pour que Mozilla prenne en compte cette propriété. Le code devient

#example1 {
    -moz-border-radius: 15px;
    border-radius: 15px;
}

Comment ça marche

Les coins arrondis peuvent être construits indépendamment en utilisant les 4 propriétés individuelles « border-*-radius » (border-bottom-left-radius, border-top-left-radius, etc.) ou pour les 4 coins simultanément en utilisant le raccourci « border-radius ». Voyons dans un premier temps la syntaxe pour la gestion individuelle de l’arrondi de chaque coin.

border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

Les propriétés « border-*-radius » peuvent chacune accepter une ou deux valeurs, exprimées soient par une longueur, soit par un pourcentage (par rapport au dimensions du cadre). Ceci permet de réaliser 4 arrondis différents.

La syntaxe :

border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]?

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

Lorsque deux valeurs sont données, elle définissent respectivement le rayon horizontal et vertical de l’arrondi, ce qui définit finalement la courbure du coin de la bordure du cadre.

Lorsqu’une seule valeur est donnée, elle définit à la fois la valeur horizontale et la valeur verticale de l’arrondi.

Les diagrammes suivants présentent quelques exemples de l’aspect des coins arrondis obtenus en fonctions de différents rayons.

La propriété « border-radius » peut être définie pour définir simultanément les rayons des 4 coins du cadre. La propriété accepte un ou deux jeux de valeurs, consistant chacun en 1 à 4 longueurs ou pourcentages. La syntaxe :

border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;

border-radius: 5px 10px / 10px;

Le premier jeu de 4 valeurs définit les rayons horizontaux des 4 coins. Un second jeux de valeurs optionnel, précédé d’un « / », définit le rayon vertical pour les 4 coins. Si un seul jeu de valeurs est spécifié, elles déterminent à la fois le rayon vertical et horizontal de chaque coin.

Pour chaque jeu de valeurs, la règle suivante s’applique :

Si les 4 valeurs sont spécifiées, elle représentent respectivement : top-left, top-right, bottom-right and bottom-left. Si bottom-left est omis, il prendra la même valeur que top-right. De même, si bottom-right est omis, il sera égal à top-left, et si une seule valeur est donnée, elle sera utilisée pour les 4 coins.