Qu'est-ce que CSS border-radius ?

CSS border-radius arrondit les coins de la boîte de bordure d'un élément. Il accepte un à quatre valeurs spécifiant le rayon de chaque coin. Vous pouvez créer des cercles, ellipses, formes pill et courbes organiques complexes.

Différence entre la propriété raccourcie border-radius et les propriétés de coin individuelles ?

Le raccourci accepte 1-4 valeurs dans le sens horaire. Les propriétés individuelles (border-top-left-radius, etc.) permettent deux valeurs pour les coins elliptiques asymétriques.

Comment créer un cercle parfait avec border-radius ?

Définissez border-radius à 50% sur un élément carré. Comme les valeurs en pourcentage sont relatives aux dimensions, 50% dans chaque direction crée une ellipse — un cercle quand largeur égale hauteur.

Que sont les valeurs elliptiques de border-radius ?

border-radius peut prendre deux valeurs par coin séparées par une barre oblique, définissant les rayons horizontaux et verticaux indépendamment : `border-radius: 50px / 25px`.

border-radius affecte-t-il la zone de clic ou le débordement ?

border-radius arrondit uniquement l'apparence visuelle. Pour rogner le contenu aux coins, ajoutez overflow: hidden.

Comment utiliser border-radius dans un système de design ?

Les systèmes de design définissent des tokens de rayon : --radius-sm (4px), --radius-md (8px), --radius-lg (16px), --radius-full (9999px).

border-radius est-il supporté par tous les navigateurs ?

border-radius est supporté par tous les navigateurs modernes depuis IE9. Aucun préfixe vendor nécessaire.

Border Radius
Generator

Générez des valeurs CSS border-radius avec un aperçu en direct. Contrôlez chaque coin indépendamment ou verrouillez-les ensemble.

Les 4 coinsVerrouiller / déverrouillerCSS-ready

① Faites glisser les curseurs de rayon ② Verrouillez les coins pour l'uniformité ③ Copiez le CSS

Préréglages

Haut gauche: 20px

Haut droite: 20px

Bas gauche: 20px

Bas droite: 20px

CSS généré

border-radius: 20px;

Coins individuels

CSS border-radius accepte jusqu'à 4 valeurs pour contrôler chaque coin indépendamment : haut-gauche, haut-droite, bas-droite, bas-gauche (dans le sens des aiguilles d'une montre).

Raccourci

Quand tous les coins sont égaux, une seule valeur est émise. CSS supporte aussi les rayons elliptiques avec la syntaxe "/".

Unités

Border-radius accepte px (absolu), % (relatif à la taille de l'élément) et d'autres unités. 50% sur un carré crée un cercle parfait.

CSS border-radius — coins, formes et support des navigateurs

La propriété CSS border-radius arrondit les coins d'un élément. Elle accepte jusqu'à quatre valeurs dans le sens horaire avec px, %, em ou rem. border-radius: 50% sur un carré crée un cercle parfait ; border-radius: 9999px crée une forme pill. La syntaxe slash (border-radius: 50px / 25px) définit des coins elliptiques. Pour rogner les images, ajouter overflow: hidden. Supporté dans tous les navigateurs modernes depuis CSS3. Dans Figma, coller les valeurs directement dans les champs de rayon de coin.

Questions fréquentes

La propriété CSS border-radius arrondit les coins du border-box d'un élément. Elle accepte 1–4 valeurs de longueur (px, %, em) pour chaque coin dans le sens horaire.

1 valeur : tous les coins égaux. 2 valeurs : TL/BR et TR/BL. 3 valeurs : TL, TR/BL, BR. 4 valeurs : TL, TR, BR, BL. Quand les quatre sont égaux, le générateur émet une seule valeur.

Les pixels donnent des tailles de coin absolues. Les pourcentages sont relatifs aux dimensions de l'élément — 50% crée un cercle si l'élément est carré.

Définissez border-radius: 50% sur un élément carré. Pour les rectangles, border-radius: 50% / 50% crée une ellipse.

Border-radius a un impact minimal sur les éléments statiques. L'animer peut provoquer des repaints. Utiliser border-radius avec transform sur la couche GPU est plus performant.

Dans Figma, border-radius se définit par coin dans le panneau design. Dans Sketch, via les poignées de rayon de coin. Les deux supportent des rayons mixtes.

Border-radius fonctionne sur la plupart des éléments HTML. Sur img, overflow: hidden est nécessaire pour rogner l'image.

CSS border-radius — coins, formes et support des navigateurs

Questions fréquentes

Explorez notre réseau