border-top-right-radius

Exemple interactif

border-top-right-radius: 80px 80px;

border-top-right-radius: 250px 100px;

border-top-right-radius: 50%;

border-top-right-radius: 50%;
border: black 10px double;
background-clip: content-box;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Ceci est une boîte avec un coin supérieur droit arrondi.
  </div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

Syntaxe

/* Le coin est un cercle         */
/* La valeur indique le rayon de courbure */
border-top-right-radius: 3px;

/* Le coin est une ellipse         */
/* border-top-right-radius: horizontal vertical */
border-top-right-radius: 0.5em 1em;

border-top-right-radius: inherit;

/* Valeurs globales */
border-top-right-radius: inherit;
border-top-right-radius: initial;
border-top-right-radius: revert;
border-top-right-radius: revert-layer;
border-top-right-radius: unset;

Avec une valeur :

• la valeur est une longueur (<length>) ou un pourcentage (<percentage>) indiquant le rayon du cercle à utiliser pour la bordure de ce coin.

Avec deux valeurs :

• la première valeur est une longueur (<length>) ou un pourcentage (<percentage>) indiquant l'axe semi-majeur horizontal de l'ellipse à utiliser pour la bordure de ce coin.
• la seconde valeur est une longueur (<length>) ou un pourcentage (<percentage>) indiquant l'axe semi-majeur vertical de l'ellipse à utiliser pour la bordure de ce coin.

Valeurs

<length-percentage>

La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type <length>. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.

Description

L'arrondi peut être un cercle ou une ellipse, ou si l'une des valeurs est 0, aucun arrondi n'est appliqué et le coin est carré.

Un arrière-plan, qu'il s'agisse d'une image ou d'une couleur, est rogné à la bordure, même si elle est arrondie ; l'emplacement exact du rognage est défini par la valeur de la propriété background-clip.

Définition formelle

Syntaxe formelle

border-top-right-radius = 
  <border-radius>  

<border-radius> = 
  <slash-separated-border-radius-syntax>  |
  <legacy-border-radius-syntax>           

<slash-separated-border-radius-syntax> = 
  <length-percentage [0,∞]> [ / <length-percentage [0,∞]> ]?  

<legacy-border-radius-syntax> = 
  <length-percentage [0,∞]>{1,2}  

<length-percentage> = 
  <length>      |
  <percentage>  

Exemples

Arc de cercle

Une seule valeur <length> produit un arc de cercle.

<div></div>

div {
  border-top-right-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Arc d'une ellipse

Deux valeurs <length> différentes produisent un arc d'ellipse.

<div></div>

div {
  border-top-right-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Élément carré avec un rayon en pourcentage

Un élément carré avec une seule valeur <percentage> produit un arc de cercle.

<div></div>

div {
  border-top-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Élément qui n'est pas carré avec un rayon en pourcentage

Un élément qui n'est pas carré avec une seule valeur <percentage> produit un arc d'ellipse.

<div></div>

div {
  border-top-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété raccourcie border-radius
• Les propriétés border-bottom-right-radius, border-bottom-left-radius et border-top-left-radius