Les coins arrondis en CSS

[Invité]

Vous en avez marre de votre design carré ? Vous aimeriez des coins arrondis sur vos cadres ? Le CSS permet de le faire très simplement et ce avec une simple propriété.

Dans ce tutoriel, nous allons utiliser la propriété border-radius. C'est elle qui permet d'arrondir nos coins. Elle s'utilise comme ceci :

Code:

#truc
{
    border: 2px solid black;
    border-radius: 15px;
}

Ceci est un exemple, vous pourrez bien sûr personnaliser le degré de rondeur de vos coins.

Simple, n'est-ce pas ? Voilà un petit exemple de cadre arrondi :



Notez que cette propriété ne définit que la rondeur des coins. C'est la propriété border qui définit le style de bordure. Border-radius complète donc border pour ajouter les coins arrondis.

Si vous voulez définir la rondeur de chaque coin, vous pouvez utiliser la propriété comme ceci :

Code:

#truc
{
    border: 2px solid black;
    border-radius: 20px 40px 13px 0px;
}

Là encore, c'est personnalisable. Vous pouvez définir le nombre de pixels que vous voulez pour chaque coin. Les correspondances sont les suivantes :




Un petit exemple :




Et voilà, vous savez faire des coins arrondis !

Note : Il se peut que cela ne marche pas avec Firefox 3.6 et antérieur. Pour régler ce problème, vous devez créer la même propriété avec le préfixe -moz-. Cela donne :

Code:


#truc
{
    border: 2px solid black;
    border-radius: 15px;
    -moz-border-radius: 15px;
}

Je pense que Firefox 4 n'aura plus besoin de ça, c'est juste une question de patience. Pour en savoir plus sur les préfixes : http://www.journaldunet.com/developpeur/client-web/les-prefixes-vendeurs-en-css.shtml

EDIT : Firefox 4 étant sorti, vous n'avez plus besoin d'utiliser le préfixe -moz-. Vous pouvez toujours utiliser des préfixes pour la compatibilité sur d'anciens navigateurs, mais il vaut mieux inciter vos visiteurs à se mettre à jour.

Une petite chose, pour IE, ce n'est même pas la peine d'y penser. Je vous conseille de mettre un message sur votre site pour inciter les utilisateurs d'IE à changer de navigateur.

[supermario58]

Merci pour ce tuto certes utile !
Tu gagnes 10 pièces pour bon tuto !