Attribut BORDER-RADIUS

Rôle

L’attribut border-radius permet d’arrondir les 4 coins d’un élément HTML (à gauche, à droite, en haut et en bas).

Cet attribut est le raccourci de

• border-top-left-radius qui spécifie l’arrondi du coin supérieur gauche
• border-top-right-radius qui spécifie l’arrondi du coin supérieur droite
• border-bottom-right-radius qui spécifie l’arrondi du coin inférieur droite
• border-bottom-left-radius qui spécifie l’arrondi du coin inférieur gauche

Cet attribut peut prendre plusieurs valeurs possibles :

4 valeurs pour pouvoir différencier les coins (dans l’ordre) supérieur gauche – supérieur droite – inférieur droite – inférieur gauche de l’élément HTML

border-radius : 30px 60px 10px 100px ;

3 valeurs : la première pour le coin supérieur gauche, la deuxième pour les coins supérieur droite – inférieur gauche, et la dernière pour le coin inférieur droite

border-radius : 30px 60px 10px;

2 valeurs : la première pour les coins supérieur gauche – inférieur droite, la deuxième pour les coins supérieur droite – inférieur gauche

border-radius : 20px 10px;

1 valeur pour les quatre coins

border-radius : 20px ;

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.borderRadius

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

div{
  width: 300px;
  height: 200px;
  background-color: silver;
  border-radius: 30px 60px 0;
}

– Le code HTML

<div></div>

Résultat

Vous remarquez, dans cet exemple, que le coin inférieur droite n’est pas arrondi

Compatibilité

L’attribut border-radius est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 9.
Pour implémenter cet attribut sur un ensemble de navigateur, vous devez utilisez les préfixes -webkit-(Chrome, Safari, Android…), -moz- (Mozilla).

Valeurs

Les différentes valeurs de l’attribut border-radius sont:

rayon de courbure

Une valeur en px, em, cm..
Syntaxe :
border-radius : 20px

rayon de courbure en pourcentage %

Une dimension en pourcentage par rapport à la taille de l’élément. Si la forme est carré, vous pouvez former un rond avec une valeur de border-radius de 50%
Syntaxe :
border-radius : 50%

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécification.
Syntaxe :
border-radius : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
border-radius : inherit

A voir aussi

border-top-left-radius – border-top-right-radius – border-bottom-right-radius – border-bottom-left-radius