border-top-right-radius

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propriété border-top-right-radius définit le rayon de courbure de la bordure pour le coin en haut à droite de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut 0, aucun arrondi n'a lieu et le coin est un angle droit.

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">
    This is a box with a top right rounded corner.
  </div>
</section>

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

Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de background-clip.

Note : Si la valeur de cette propriété n'est pas définie par la propriété raccourcie border-radius et que cette dernière est appliquée après border-top-radius-radius, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de la propriété raccourcie.

Syntaxe

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

/* Le coin est un quart d'ellipse         */
/* La première valeur indique le demi-axe */
/* horizontal et la seconde le demi-axe   */
/* vertical                               */
border-top-right-radius: 0.5em 1em;

border-top-right-radius: inherit;

Cette propriété peut prendre deux formes :

  • Une première avec une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure pour ce coin
  • Une seconde avec deux valeurs
    • La première est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin
    • La seconde est une longueur (<length>) ou un pourcentage (<percentage>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour 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.

Définition formelle

Valeur initiale0
Applicabilitétous les éléments, mais les agents utilisateurs ne sont pas tenus de l'appliquer aux éléments de type table ou inline-table lorsque border-collapse vaut collapse. Le comportement sur les éléments de type table interne est pour l'instant indéfini.. S'applique aussi à ::first-letter.
Héritéenon
Pourcentagesse rapporte à la dimension correspondance de la boîte de bordure
Valeur calculéedeux longueurs absolues ou deux pourcentages
Type d'animationune longueur, pourcentage ou calc() ;

Syntaxe formelle

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

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

Exemples

CSS

css
div {
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 130px;
}

.arc_cercle {
  border-top-right-radius: 40px 40px;
}

.arc_ellipse {
  border-top-right-radius: 40px 20px;
}

.pourcentage {
  border-top-right-radius: 40%;
}

.rognage {
  border: black 10px double;
  border-top-right-radius: 40%;
  background-color: rgb(250,20,70);
  background-clip: content-box; // essayez margin-box...
}

HTML

html
<div class="arc_cercle"></div>
<div class="arc_ellipse"></div>
<div class="pourcentage"></div>
<div class="rognage"></div>

Résultat

Spécifications

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-radius

Compatibilité des navigateurs

Voir aussi