Attribut BORDER-BOTTOM-RIGHT-RADIUS

Rôle

L’attribut border-bottom-right-radius permet d’arrondir le coin inférieur droite d’un élément HTML.

Cet attribut peut prendre plusieurs valeurs possibles :

2 valeurs : dans ce cas l’arrondi ressemble à une ellipse. La première valeur représente le rayon horizontal, la deuxième valeur représente le rayon vertical

border-bottom-right-radius : 20px 10px;

Note : vous pouvez utiliser les valeurs en pourcentage (la première se réfère à la largeur de l’élément HTML et la deuxième à sa hauteur)

1 valeur : dans ce cas l’arrondi ressemble à un cercle et la valeur correspond à la taille du rayon

border-bottom-right-radius : 20px ;

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.borderBottomRightRadius

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

div{
  width: 200px;
  height: 200px;
  background-color: silver;
  border-bottom-right-radius: 50%;
}

– Le code HTML

<div></div>

Résultat

Vous remarquez, dans cet exemple, que seul le coin inférieur droite est arrondi

Compatibilité

L’attribut border-bottom-right-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-bottom-right-radius sont:

rayon de courbure

Une valeur ou deux en px, em, cm..
Syntaxe :
border-bottom-right-radius : 20px 20px

rayon de courbure en pourcentage %

Une valeur ou deux en pourcentage par rapport à la taille de l’élément (la première se réfère à la largeur de l’élément HTML et la deuxième à sa hauteur). Si la forme est carré, vous pouvez former 1/4 d’un rond avec une valeur de border-bottom-right-radius de 100%
Syntaxe :
border-bottom-right-radius : 100%

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-bottom-right-radius : initial

inherit

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

A voir aussi

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