Coins arrondis CSS

Coins arrondis CSS

Par CSS border-radius Les propriétés peuvent réaliser le style de 'arrondi' pour tout élément.

Propriété border-radius CSS

CSS border-radius La propriété 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 La propriété est en fait une abréviation des propriétés suivantes :

  • 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 La propriété peut 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 le coin supérieur droit et le coin 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 le coin supérieur gauche et le coin inférieur droit, la deuxième valeur pour le coin supérieur droit et le coin 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 arrondis 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

Propriété arrondi CSS

Propriété Description
border-radius Propriété abrégée pour définir les quatre propriétés de bordure-*-*-radius.
border-top-left-radius Définir la forme du bord en haut à gauche.
border-top-right-radius Définir la forme du bord en haut à droite.
border-bottom-right-radius Définir la forme du bord en bas à droite.
border-bottom-left-radius Définir la forme du bord en bas à gauche.