Blog iamvdo.meLa propriété border-radius permet de créer des coins arrondis sur un bloc. Cette propriété s’utilise de la façon suivante :
border-radius: 5px;
border-radius: 5px 10px;
border-radius: 10px 0px 0px 10px;Il existe plusieurs façons d’utiliser cette règle, à la manière des marges internes et externes (padding et margin) :
- Une valeur : les 4 coins sont arrondis avec cette valeur.
- Deux valeurs : la première valeur arrondit le coin haut-gauche et bas-droit, la seconde arrondit le coin haut-droit et bas-gauche.
- Quatre valeurs : chaque coin a son propre arrondi.
Et dans les navigateurs ?
Cette propriété est compatible de façon non-préfixée dans IE 9, Firefox 4, Chrome 5, Safari 5, Opéra 10.5, iOS 4 et Android 2.2. Les versions préfixées ne doivent plus être utilisées.
#1par Romuald, le 26 juillet 2012
J’aime beaucoup le principe. Par contre, sous firefox, un coin arrondi sur un div scrollable, perd le coin arrondi en haut à droite et et en bas à droite.