Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété border-radius

Description de border-radius.

La propriété définit le rayon des angles. Autrement dit border-radius permet de créer des rectangles aux angles arrondis.

C'est une propriété raccourcie qui permet de définir en une seule règle les valeurs des quatre propriétés suivantes :

  • border-top-left-radius : Angle en haut à gauche.
  • border-top-right-radius : Angle en haut à droite.
  • border-bottom-left-radius : Angle en bas à gauche.
  • border-bottom-right-radius : Angle en bas à droite.

border-radius accepte de une à quatre valeurs :

  • Si une seule valeur est précisée, elle s'applique aux quatre angles.
  • Si deux valeurs sont précisées, la première définit le rayon des angles en haut à gauche et en bas à droite ; la deuxième valeur définit le rayon des angles en haut à droite et en bas à gauche.
  • Si trois valeurs sont précisées, la première définit le rayon de l'angle en haut à gauche, la deuxième celui des angles en haut à droite et en bas à gauche, enfin, la troisième valeur définit le rayon de l'angle en bas à droite.
  • Enfin, lorsque les quatre valeurs sont précisées, elles correspondent respectivement aux rayon des angles en haut à gauche, en haut à droite, en bas à droite et en bas à gauche.
Border-radius avec une seule valeur
Une seule valeur
Border-radius avec quatre valeurs
Quatre valeurs
Border-radius avec deux valeurs
Deux valeurs
Border-radius avec trois valeurs
Trois valeurs

Une deuxième série de valeurs peut être précisée après un caractère slash ( / ) permettant de définir des arrondis elliptiques (largeur et hauteur différentes). Les valeurs avant le / définissent les largeurs des arrondis, tandis que les valeurs après le / définissent leur hauteur.

Remarque : border-radius n'a aucun effet sur les cellules de tableau lorsque celles-ci sont accolées avec la propriété border-collapse fixée à la valeur collapse;.

Syntaxes pour border-radius.

  • border-radius: 10px;
    Une valeur numérique, positive ou nulle, suivie de son unité de dimension (voir les unités de dimensions en CSS). Le rayon des quatre angles est défini à la valeur indiquée. La valeur par défaut est 0.
    Si l'unité est une unité de dimension absolue (px, cm...) le rayon sera un quart de cercle.
  • border-radius: 30%;
    Si la valeur est exprimée en pourcentage, le rayon sera probablement un quart d'ellipse. En effet les pourcentages sont calculé par rapport aux dimensions de l'élément : sa largeur et sa hauteur. A moins que l'élément ne soit carré, les arrondis d'angle seront donc elliptiques.
  • border-radius: 50px 10px;
    Deux valeurs séparées par un espace : la première définit le rayon des angles en haut à gauche et en bas à droite. La deuxième valeur définit le rayon des deux autres angles.
  • border-radius: 50px 10px 0;
    Trois valeurs séparées par un espace : la première définit le rayon du premier angle (en haut à gauche). La deuxième valeur définit le rayon des deuxième et quatrième angles, et la troisième valeur le rayon du troisième angle (en bas à droite).
  • border-radius: 50px 10px 0 30px;
    Quatre valeurs séparées par un espace : elles définissent chacune le rayon de l'un des angles, en commençant par l'angle en haut à gauche et en tournant dans le sens des aiguilles d'une montre.
  • border-radius: 30px / 50px;
    Le caractère slash ( / ) introduit une deuxième série de valeurs. Chaque arrondi peut alors être un quart d'ellipse, la valeur avant le / indiquant la largeur de l'ellipse, tandis que la valeur après le / indique sa hauteur.
  • border-radius: 30px 0 / 50px 0;
    De une à quatre valeurs peuvent être énumérées avant et après le slash. Les règles d'attribution à chacun des angles restant les mêmes.
  • border-radius: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Cas particuliers.

Conflit avec les barres de défilement.

Évitez les angles arrondis si des barres de défilement sont prévues : certains navigateurs suppriment les arrondis, d'autres affichent des choses peu élégantes.

Le carré est un triangle qui a réussi, ou une circonférence qui a mal tourné... (Pierre Dac)
C'est en commençant par casser le premier angle d'un carré que l'on arrive à faire un cercle.
Le poisson est un animal aux coins carrés qui vit dans les congélateurs.

Bordures épaisses.

Le rayon défini par border-radius est le rayon extérieur. Si la bordure est suffisamment épaisse, il se peut que le bord intérieur du trait ne soit pas arrondi.

À vouloir toujours arrondir les angles, on finit par tourner en rond.

Rayon de l'arrondi supérieur à une des dimensions de l'élément.

Dans le premier exemple ci-dessous nous avons demandé un rayon de 200 pixels pour chacun des angles. Ceci n'est pas possible dans la hauteur de l'élément (40 pixels). On voit que le navigateur a réduit le rayon des arrondis mais tout en conservant des quarts de cercle, même si, dans la largeur, l'arrondi de 200 pixels aurait été possible.

Pour que les choses tournent rond, il faut être carré.

Dans ce deuxième exemple, les rayons demandés sont 100 pixels et 20 pixels. Le navigateur ne peut pas faire entrer 100 pixels dans la hauteur. Il a donc réduit ce rayon. Mais il a réduit aussi dans les mêmes proportions le rayon de 20 pixels pour conserver l'aspect général, bien que ce rayon de 20 pixels ait pu tenir ans la hauteur de l'élément.

Pour que les choses tournent rond, il faut être carré.

Bordures de largeurs différentes.

Si les bordures n'ont pas la même largeur, et qu'elles se raccordent par un arrondi, l'épaisseur du trait est censée évoluer progressivement de la plus étroite à la plus large sur la distance de l'arrondi.

Bordures de couleurs différentes.

Contrairement à l'épaisseur, la couleur ne varie pas en dégradé sur la distance de l'arrondi, mais au contraire passe brutalement d'une couleur à l'autre suivant une rupture diagonale.

Simulateur.

border-radius :
/

Exemple : obtenir une image ronde.

 

Cliquez sur l'image pour afficher le code CSS. Ici l'image est une image d'arrière-plan mais il serait facile d'obtenir un effet similaire avec une balise img.

 

 

Voir aussi...

Bordures - Propriétés.