Border-Radius CSS : Guide Complet pour des Coins Arrondis

Syntaxe de Border-Radius

La propriete CSS border-radius arrondit les coins d un element. La syntaxe la plus simple prend une seule valeur pour les quatre coins : border-radius: 10px. Vous pouvez utiliser des pixels, des pourcentages, des em ou toute unite CSS valide.

Avec deux valeurs, la premiere s applique aux coins haut-gauche et bas-droit, la seconde aux coins haut-droit et bas-gauche. Avec quatre valeurs, chaque coin recoit sa propre valeur dans le sens horaire en partant du haut-gauche.

Les proprietes individuelles existent : border-top-left-radius, border-top-right-radius, border-bottom-right-radius et border-bottom-left-radius. Elles sont utiles quand vous voulez arrondir un seul coin sans affecter les autres.

Formes Courantes

L arrondi leger des cartes, boutons et champs de saisie est le cas le plus frequent. Une valeur de 4 a 8 pixels adoucit les coins sans changer la forme de l element. C est le standard du design web moderne.

Pour un cercle parfait, appliquez border-radius: 50% a un element carre. Ce motif est omnipresent pour les avatars et les icones de profil. Si l element n est pas carre, 50 % cree une ellipse.

Les boutons pilule utilisent une valeur suffisamment grande : border-radius: 9999px. La valeur exacte n importe pas tant qu elle depasse la moitie de la hauteur de l element.

Les formes organiques utilisent des valeurs differentes pour chaque coin avec la syntaxe elliptique : border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. La barre oblique separe les rayons horizontaux des verticaux.

Coins Elliptiques

Chaque coin peut avoir un rayon horizontal et vertical differents, creant une courbe elliptique. La syntaxe utilise une barre oblique : border-radius: 50px / 25px cree des coins deux fois plus larges que hauts.

Cette fonctionnalite permet de creer des formes organiques complexes impossibles avec des coins circulaires simples. Les formes de goutte d eau, de feuille et de blob utilisent toutes des coins elliptiques.

La syntaxe complete avec la barre oblique accepte huit valeurs : quatre rayons horizontaux suivis de quatre rayons verticaux, donnant un controle total sur chaque coin.

Border-Radius sur les Images

Appliquer border-radius aux images fonctionne comme pour tout element. border-radius: 50% sur une image carree cree une image circulaire. La propriete overflow: hidden sur le conteneur parent est parfois necessaire pour masquer les coins qui depassent.

Pour les videos, le meme principe s applique. Pour une compatibilite maximale, placez la video dans un conteneur avec border-radius et overflow: hidden.

Notre Generateur de Border-Radius

Notre Generateur de Border-Radius vous permet de visualiser et ajuster les coins arrondis en temps reel. Deplacez les curseurs pour chaque coin, basculez entre les modes circulaire et elliptique, et copiez le CSS genere. Experimentez avec des formes organiques complexes sans ecrire de code.