Le secret du Border-Radius à 8 valeurs
La plupart des développeurs web utilisent la propriété border-radius de manière très basique, en lui attribuant une seule valeur (ex: border-radius: 10px;) ou quatre valeurs pour chaque coin (ex: border-radius: 10px 20px 30px 40px;).
Mais le CSS permet d'aller beaucoup plus loin. En utilisant un slash (/), vous pouvez définir un rayon horizontal ET un rayon vertical indépendant pour chaque coin. C'est ce qui permet de créer des formes elliptiques complexes, souvent appelées Blobs.
Comment lire la syntaxe générée ?
Le code généré ressemble à ceci : border-radius: 51% 49% 70% 30% / 30% 36% 64% 70%;
- Avant le slash (/) : Ce sont les valeurs horizontales (axe X) pour les coins Top-Left, Top-Right, Bottom-Right et Bottom-Left.
- Après le slash (/) : Ce sont les valeurs verticales (axe Y) pour ces mêmes coins dans le même ordre.
Cas d'usage en Web Design Moderne
Ces formes organiques (Blobs) sont extrêmement populaires dans l'UI Design contemporain. Elles sont parfaites pour :
- Créer des arrière-plans colorés dynamiques et moins rigides derrière des illustrations.
- Masquer des photos de profil (Avatars) avec des formes plus originales qu'un simple cercle parfait.
- Animer la forme au survol (
:hover) pour donner un effet de "respiration" ou de fluide au bouton.