Border-radius, propriété CSS
Résumé des caractéristiques de la propriété border-radius
0border-radius passe progressivement d'une valeur à une autre.Schéma de la syntaxe de border-radius.
border-radiusCliquez sur le schéma pour plus de détails sur les valeurs
Télécharger le schéma en SVG
Légende des termes utilisés sur le schéma ci-dessous :
lengthest un nombre suivi d'une des unités de dimension, et correspondant au rayon de l'arrondi.%est un pourcentage calculé par rapport à la dimension de l'élément.- Dans chaque groupe, de une à quatre valeurs peuvent être énumérées en les séparant par des espaces.
Description de la propriété 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é résumée 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.
- 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.
Une seule valeur
Quatre valeurs
Deux 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; (voir exemple plus bas).
Prise en charge de la langue.
Dans certains cas on peut souhaiter que la définition des arrondis soit dépendante du mode d'écriture, donc de la langue.
Par exemple, si on souhaite définir un angle arrondi au début des paragraphes, ce sera l'angle en haut à gauche (top-left)
pour les langues latines, mais l'angle en haut à droite (top-right) pour les langues arables.
Les propriétés ci-dessous, dites "logiques", permettent de définir les arrondis en fonction de la langue du texte.
Voici leur équivalence avec les propriétés physiques pour les langues latines.
border-start-start-radius: début de bloc, début de ligne.border-end-start-radius: fin de bloc, début de ligne.border-start-end-radius: début de bloc, fin de ligne.border-end-end-radius: fin de bloc, fin de ligne.
⬐ border-top-left-radiusborder-bottom-left-radius ⬏⬐ border-top-right-radiusborder-bottom-right-radius ⬏Valeurs pour border-radius.
- border-radius: 10px;
Une valeur numérique, positive ou nulle, suivie de son unité de dimension (voir les unités de dimension). 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; border-radius: 50px 10px; border-radius: 50px 10px 0; border-radius: 50px 10px 0 30px;
De une à quatre valeurs peuvent être indiquées en les séparant par un espace. En fonction de leur nombre, elles sont associées aux angles de l'élément de la façon suivante :
border-radius:50px;Une seule valeur : elle s'applique à l'identique à tous les angles.
border-radius:50px 10px;Si deux valeurs sont indiqué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 deux autres angles.
border-radius:50px 10px 0;Trois valeurs séparées : 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 dernier angle (en bas à droite).
border-radius:50px 20px 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: 50px / 25px; a b
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.
Valeurs communes à toutes les propriétés :
border-radius: initial (0)
border-radius: inherit
border-radius: revert
border-radius: revertLayer
border-radius: unset
Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.
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.
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.
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.
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 dans la hauteur de l'élément.
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.
Effet de border-radius sur les tables.
Les coins arrondis ne sont appliqués sur les tableaux et les cellules que si la propriété border-collapse du tableau
a la valeur separate. Ce qui est le cas sur le premier des deux tableaux ci-dessous.
| Cellule | Cellule | Cellule |
| Cellule | Cellule | Cellule |
| Cellule | Cellule | Cellule |
| Cellule | Cellule | Cellule |
Exemple : obtenir une image ronde.
Sur cet exemple, l'image est une image d'arrière-plan mais il serait facile d'obtenir un effet similaire avec une balise img.
Exemple d'animation de border-radius.
La propriété border-radius peut facilement être animée, que ce soit avec une seule valeur ou avec
la syntaxe avec plusieurs valeurs (deux valeurs dans l'exemple ci-dessous).
Accéder à la propriété border-radius par programme.
Modifier l'arrondi des angles en Javascript.
Le code ci-dessous définit un arrondi de 20 pixels pour chacun des angles.
Deux syntaxes sont possibles : avec le nom de la propriété écrit en kebab-case ou en camel-case.
let el = document.getElementById('id');
el.style['border-radius'] = '20px';
// ou
let el = document.getElementById('id');
el.style.borderRadius = '20px';
Lire en Javascript la valeur de l'arrondi des angles.
Le code ci-dessous retrouve la valeur de la propriété border-radius si celle-ci a été définie via l'attribut style
de l'élément. les valeurs affectées via un sélecteur CSS ne sont pas prises en compte par ce code.
let el = document.getElementById('id');
let value = el.style['border-radius'];
// ou
let el = document.getElementById('id');
let value = el.style.borderRadius;
Lire la valeur calculée de border-radius en Javascript.
La valeur calculée est, soit celle qui a été affectée à border-radius directement sur l'élément (par l'attribut style ou via un
sélecteur CSS), soit une valeur héritée, soit encore la valeur initiale de la propriété (0 dans le cas de border-radius).
Dans tous les cas, la valeur calculée est toujours définie.
La valeur calculée est renvoyée en pixels quelque soit l'unité utilisée pour la définir, sauf les pourcentages qui sont conservés en tant que tels.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('border-radius');
Modifier la valeur de la propriété border-radius avec JQuery.
Ici aussi, deux syntaxe sont possibles: avec le nom de la propriété en kebab-case ou en camel-case.
$('#id').css('border-radius', '20px');
// ou
$('#id').css('borderRadius', '20px');
Lire la valeur calculée de la propriété border-radius avec JQuery.
let value = $('#id').css('border-radius');
Autres exemples de code.
D'autres exemples de code sont donnés sur la page Javascript et CSS.
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété border-radius et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de border-radius. On constate en particulier
que les pourcentages sont bien mémorisés en tant que pourcentages et que toutes les autres unités sont converties en pixels.
Exemple interactif avec la propriété border-radius.
Compatibilité des navigateurs avec border-radius.
La gestion des angles arrondis, et donc de la propriété border-radius est maintenant correcte sur tous les navigateurs.
border-radius permettant de tracer des angles arrondis.border-radius logiques (prenant en charge le mode d'écriture de la langue).border-radius(propriétés physiques)
border-radius(propriétés logiques)
percentages
elliptiques
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Chrome
Edge
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Firefox
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Histoire de la propriété border-radius.
-
Module CSS - Arrière-plans et bordures - Niveau 3
Introduction dans la spécification des arrondis d'angles, et des propriétés pour les définir, dont la propriété résuméeborder-radius.
02 Août 2002Document de travail.
17 Décembre 2009Candidat à la recommandation.
Voir aussi, au sujet des bordures.
La spécification du W3C "CSS Backgrounds and Borders Module" regroupe tout ce qui concerne les bordures et les arrière-plans, ce qui représente pas mal de choses. Pour faciliter vos recherches, nous listons ci-dessous les principales propriétés décrites dans cette norme.