Propriété CSS border-top-right-radius

❮ Précédent Suivant ❯

La propriété CSS border-top-right-radius définit l'arrondissement du coin supérieure-droit de l'élément. Il y a trois types d'arrondissement. Ça peut être un cercle ou une ellipse, ou on peut utiliser aucune valeur et le coin est carré. Si vous utilisez image de fond une ou une couleur, elle sera taillée à la bordure. Le procès de coupure est définit par la valeur de la propriété background-clip.

La propriété CSS border-top-right-radius a deux valeurs: length et percentage. La propriété border-top-right-radius spécifie le radius horizontal et vértical qui définit le coin suppérieure-droit arrondissé pour une boîte de bordure.

S'il y a seulement une valeur utilisée, cette valeur spécifie les radius horizontal et vertical de l'ellipse. Si on utilise les deux valeurs, la première définit le radius horizontal et la deuxième définit le vértical.

Les pourcentages pour le radius horizontal s'appliquent au largeur de la boîte , les pourcentages pour le radius vértical s'appliquent à l'hauteur de la boîte. Les valeurs négatives sont invalides.

Valeur initiale	0
Appliquée à	Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée	Non.
Animable	Oui. La bordure supérieure-droite est animable.
Version	CSS3
Syntaxe DOM	object.style.borderTopRightRadius = "25px";

Syntaxe

border-top-right-radius: length | % | initial | inherit;

Voici un exemple de border-top-right-radius où on n'a utilisée q'une valeur. Si vous donnez une valeur, cette valeur spécifie la bordure supérieure et la bordure droite à la fois.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      height: 40px;
      background: #666;
      border: 4px solid #000000;
      border-top-right-radius: 35px;
      }          
    </style>
  </head>
  <body>
    <h2>Exemple de border-top-right-radius.</h2>
    <div></div>
  </body>
</html>

Essayez-vous-même!

Un autre exemple avec deux valeurs. La première valeur est pour la bordure supérieurue, et la deuxième est pour la bordure droite.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      height: 40px;
      background: #666;
      border: 4px solid #000000;
      border-top-right-radius: 35px;
      }          
    </style>
  </head>
  <body>
    <h2>Exemple de border-top-right-radius.</h2>
    <div></div>
  </body>
</html>

Essayez-vous-même!

Considérons un autre exemple avec porcentage.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      height: 40px;
      background: #1c87c9;
      border: 4px solid #000000;
      border-top-right-radius: 60% 30%;
      }          
    </style>
  </head>
  <body>
    <h2>Exemple de border-top-right-radius.</h2>
    <div></div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
length	Définit l'arrondissement du coin supérieure-droit.
%	Définit l'arrondissement du coin supérieure-droit en pourcentage.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.