border-radius - Propriété CSS
Résumé des caractéristiques de la propriété border-radius
0
border-radius
passe progressivement d'une valeur à une autre.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é 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 du mode d'écriture.
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.
Haut
Gauche
Droite
Bas
Syntaxes pour border-radius
.
lenght
est un nombre suivi d'une unité de dimension, et correspondant au rayon de l'arrondi.
%
est une valeur exprimée en pourcentages.
De une à quatre valeurs peuvent être énumérées en les séparant par des espaces.
border-radius:
;
- border-radius: 10px;
Une valeur numérique, positive ou nulle, suivie de son unité de dimension (voir les unités CSS 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 troisième 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.
- border-radius:
initial
; border-radius:inherit
; border-radius:revert
; border-radius:revert-layer
; border-radius:unset
;La valeur initiale est :
.0
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 ans 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.
Animation de la propriété 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).
Manipulation de la propriété border-radius
par programme.
Dans les exemples de code ci-après, le paramètre el
représente l'élément ci-dessous (carré bleu). Les boutons "Test" vous
permettent d'exécuter les codes. L'effet est immédiatment répercuté sur l'affichage.
Modifier la valeur de border-radius
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
.
function setBorderRadius(el) {
el.style['border-radius']='20px';
// ou
el.style.borderRadius='20px';
}
Lire en Javascript la valeur de border-radius
.
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.
function getBorderRadius(el) {
alert(el.style['border-radius']);
// ou
alert(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
).
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.
function getCalcBorderRadius(el) {
alert(window.getComputedStyle(el).getPropertyValue('border-radius'));
}
Modifier la valeur de la propriété border-radius
avec JQuery.
function setBorderRadius(el) {
$(el).css('border-radius','50%');
// ou
$(el).css('borderRadius','50%');
}
Lire la valeur calculée de la propriété border-radius
avec JQuery.
function getCalcBorderRadius(el) {
alert($(el).css('border-radius'));
// ou
alert($(el).css('borderRadius'));
}
Exemple interactif.
Prise en charge par les navigateurs (compatibilité).
La gestion des angles arrondis, et donc de la propriété border-radius
est maintenant correcte sur tous les navigateurs.
border-radius
.
border-radius
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que border-radius
.
Les spécifications CSS éditées par le W3C sont organisées en modules. border-radius
fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.