Coins arrondis CSS

Coins arrondis CSS

Par CSS border-radius Les propriétés peuvent réaliser n'importe quel élément en style 'arrondi'.

Propriété border-radius CSS

CSS border-radius L'attribut définit le rayon des coins de l'élément.

Astuce :Vous pouvez utiliser cette propriété pour ajouter des coins arrondis à un élément !

Voici trois exemples :

1. Coins arrondis pour les éléments avec couleur de fond spécifiée :

Coins arrondis !

2. Coins arrondis pour les éléments avec bordure :

Coins arrondis !

3. Coins arrondis pour les éléments avec image de fond :

Coins arrondis !

Voici le code :

Exemple

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Essayez-le vous-même

Astuce :border-radius L'attribut est en fait une abréviation des attributs suivants :

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

border-radius CSS - Définir chaque coin

border-radius Les attributs peuvent accepter une à quatre valeurs. Les règles sont les suivantes :

Quatre valeurs - border-radius: 15px 50px 30px 5px;(Utilisées respectivement pour : coin supérieur gauche, coin supérieur droit, coin inférieur droit, coin inférieur gauche) :

Trois valeurs - border-radius: 15px 50px 30px;(La première valeur est utilisée pour le coin supérieur gauche, la deuxième pour les coins supérieur droit et inférieur gauche, la troisième pour le coin inférieur droit) :

Deux valeurs - border-radius: 15px 50px;(La première valeur est utilisée pour les coins supérieur gauche et inférieur droit, la deuxième pour les coins supérieur droit et inférieur gauche) :

Une valeur - border-radius: 15px;(Cette valeur est utilisée pour tous les quatre coins, les arrondis sont les mêmes) :

Voici le code :

Exemple

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Essayez-le vous-même

Vous pouvez également créer des coins elliptiques :

Exemple

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

Essayez-le vous-même

Attribut arrondi CSS

Attribut Description
border-radius Propriété abrégée pour définir tous les quatre attributs border-*-*-radius.
border-top-left-radius Définir la forme du coin supérieur gauche.
border-top-right-radius Définir la forme du coin supérieur droit.
border-bottom-right-radius Définir la forme du coin inférieur droit.
border-bottom-left-radius Définir la forme du bord inférieur gauche.