Créer des coins arrondis avec CSS

CSS (Cascading Style Sheets) est un langage de programmation qui permet de modifier l'apparence des pages web. Une des nombreuses caractéristiques de CSS est la capacité de créer des coins arrondis. Pour ce faire, nous utilisons la propriété border-radius.

La propriété border-radius est très flexible et permet d'obtenir différents types de coins arrondis. En utilisant une valeur simple comme border-radius: 5px;, vous pouvez obtenir des coins arrondis uniformes sur tous les coins de votre élément.

div {
  border-radius: 5px;
}

Dans l'exemple ci-dessus, tous les quatre coins du div seront arrondis de 5px. 5px est le rayon du cercle utilisé pour arrondir le coin. Si vous souhaitez utiliser des valeurs différentes pour chaque coin, vous pouvez spécifier jusqu'à quatre valeurs différentes.

div {
  border-radius: 5px 10px 15px 20px; 
}

Dans cet exemple, chaque coin aura un arrondi différent, dans l'ordre suivant: coin supérieur droit, coin supérieur droit, coin inférieur droit et enfin coin inférieur gauche.

La propriété border-radius peut également accepter des pourcentages, ce qui est utile pour créer des formes circulaires ou ovales. Par exemple, border-radius: 50%; rend un div carré en un cercle parfait.

div {
  border-radius: 50%;
}

Ainsi, la propriété border-radius en CSS est un outil puissant qui peut aider à rendre vos sites Web plus attrayants et dynamiques. Il est important de noter que les coins arrondis peuvent ne pas apparaître comme prévu dans les anciens navigateurs qui ne prennent pas en charge cette propriété. Cependant, tous les navigateurs modernes prennent en charge la propriété border-radius.