Forum marionien
Merci de venir sur le Forum Marionien ! Amusez vous bien !

Les coins arrondis en CSS

Aller en bas

Les coins arrondis en CSS

Message par Invité le Dim 30 Jan - 18:43

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.


Dernière édition par Ubunix le Mar 31 Mai - 20:52, édité 1 fois
avatar
Invité
Invité


Revenir en haut Aller en bas

Re: Les coins arrondis en CSS

Message par supermario58 le Dim 30 Jan - 19:48

Merci pour ce tuto certes utile !
Tu gagnes 10 pièces pour bon tuto !
avatar
supermario58
Fire-Admin
Fire-Admin

Lion
Messages : 1107
Date d'inscription : 24/07/2009
Age : 21
Localisation : Dans ton mobile !!!

Voir le profil de l'utilisateur http://supermario58.perso.sfr.fr/index.php

Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum