Définition de la css border-radius


Propriété css : border-radius

Détails des versions feuilles de style css border-radius
css3
Détails de compatiblilité de la feuilles de style css border-radius pour les navigateurs
Mozilla + et Firefox +
Safari 1 +
Internet Explorer 9+
Chrome +
Internet Explorer 4+
Mozilla + et Firefox +
Safari 1 +
Chrome +


Définition de border-radius

La propriété de feuille de style css border-radius permet de d'arrondir les coins d'une bordure.
Exemple de code :
.identifiant{
  border-radius : 5px;
}

La propriété de feuille de style border-radius css peut pendre les valeurs de :
- numérique suivie de px ou %(prend pour base width pour l'horizontal et height pour le verticale) ou pt ou em.
Si la propriété de feuille de style css border-radius est suivie d'une seule valeur alors cette valeur est appliquée à tous les coins de l'élément.
Si la propriété de feuille de style css border-radius est suivie de deux valeurs alors la première valeur est appliquée aux marges intérieures horizontales et la seconde aux marges intérieures verticales.

Il existe des "sous propriétés" qui fonctionnent avec 1 ou 2 valeurs :
border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius

Evolution pour les versions CSS3 :
Chaque valeur accepte un format liste valeurs / liste valeurs. La première liste représente les rayons horizontaux des coins, la deuxième liste représente les rayons verticaux des coins
Exemple de code :
Exemple de code :
.identifiant{
  border-radius : 10px 10px / 5px 5px;
}


La propriété de feuille de style css border-radius est applicable sur tous les éléments qui ont une bordure.


La propriété de feuille de style border-radius css est reconnue que par Internet Explore 9+, Chrome 4+, FireFox 4.0, Opera 10.5+ et Safari 5.0+


FAQ

Répond aux questions suivantes :

Comment faire des coins arrondis sur sur un élément HTML?
Liste des questions les plus fréquemment posées en css.

Exemples et astuces css

Un coin arrondi pour un maximum de navigateurs

Voici le code pour que votre coin arrondi apparaisse sur le maximum de navigateurs.
Code css du coin arrondi :
Exemple de code :
.moncoin {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

Générateur de code css pour coins arrondis

BUG INTERNAUTE

Explication

Vous trouverez ci-dessous divers bugs d'interprétation de la css border-radius.
Ces bugs ont été transmis par les internautes du site.

J'ai vérifié certains bugs mais pour la plupart, ils sont soit sur MAC soit sur un navigateur que je ne possède pas.
Ceux que j'ai pu visualiser sont notés
Bug vérifié : oui.

VOTRE AVIS

Votez pour cette page

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5
Avis sur la page http://www.zonecss.fr/style_css/feuille_css_border_radius.html Votes: 4.6 / 5 - 14 votes
Cliquez sur une étoile pour voter.



Reporter un bug ou problème d'interprétationavec la propriété border-radius