Generateur CSS Border Radius

Générateur CSS border-radius avec contrôle par coin, unités px/rem/em/% et propriétés abrégées ou détaillées. Aperçu direct et code CSS prêt à coller.

Apercu

Mode

SimpleAvanceForme Blob

Rayon de bordure

Tous les coins

Parametres d'apercu

Couleur de fond

Largeur

Hauteur

Code CSS

AbrégéeDétaillée

Formes predefinies

Vous avez des commentaires ? Signalez des bugs, suggérez des fonctionnalités ou partagez vos idées — nous lisons tout

Generateur CSS Border Radius - Creez N'importe Quel Style de Coin

Generez des valeurs CSS border-radius des coins arrondis simples aux formes blob organiques complexes. Trois modes: simple pour des coins uniformes, avance pour un controle individuel, et blob pour creer des formes organiques uniques.

Qu'est-ce que CSS border-radius?

CSS border-radius arrondit les coins de la bordure d'un element. Il peut prendre 1-4 valeurs:

Une valeur: Meme rayon pour tous les coins
border-radius: 20px;

Quatre valeurs: Coins individuels (sens horaire depuis superieur gauche)
border-radius: 20px 40px 60px 80px;

La propriete accepte px, %, em, rem et autres unites CSS. Utiliser 50% sur un carre cree un cercle.

Comment creer des formes blob avec border-radius?

Les formes blob utilisent la syntaxe avancee de border-radius avec 8 valeurs separees par une barre (/):

border-radius: h1 h2 h3 h4 / v1 v2 v3 v4;

Les valeurs representent:
- h1-h4: Rayons horizontaux
- v1-v4: Rayons verticaux

Exemple de forme blob:
border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;

Quelle est la difference entre les unites px et %?

Unites Pixel (px):
- Taille fixe independante des dimensions de l'element
- Meilleur pour des tailles coherentes

Unites Pourcentage (%):
- Relatives aux dimensions de l'element
- 50% sur un carre cree un cercle
- S'adapte a la taille de l'element

Que fait réellement la syntaxe border-radius à 8 valeurs ?

border-radius: 70% 30% 30% 70% / 60% 40% 60% 40% signifie rayons HORIZONTAUX (avant /) et VERTICAUX (après /) par coin. Le résultat sont des courbes elliptiques (pas circulaires) à chaque coin, produisant des formes blob organiques. Chaque coin reçoit une paire unique x-radius y-radius, permettant des effets asymétriques impossibles avec une valeur unique.

Generateur CSS Border Radius — Générateur CSS border-radius avec contrôle par coin, unités px/rem/em/% et propriétés abrégées ou détaillées. Aperçu dir — **Generateur CSS Border Radius**

Quand utiliser les quatre propriétés détaillées border-*-radius plutôt que l'abrégée ?

L'option Détaillée génère chaque coin comme sa propre propriété :

border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;

Quand préférer la détaillée :
- Thématiser ou surcharger UN seul coin sans réécrire toute l'abrégée (par exemple un token de design system comme --radius-md appliqué uniquement aux coins supérieurs).
- CSS-in-JS / styled-components, où les propriétés individuelles fusionnent de façon plus prévisible qu'une abrégée qui réinitialise les quatre coins.
- Flux de linter ou de spécificité qui signalent l'abrégée car elle écrase les valeurs héritées par coin.

Quand préférer l'abrégée : le raccourci `border-radius` est plus compact et se réduit à moins de valeurs quand les coins se répètent — 4 coins identiques deviennent une seule valeur (border-radius: 12px). Utilisez le champ Sélecteur CSS pour envelopper l'un ou l'autre format dans une règle prête à coller comme `.card { ... }`. Pour des coins elliptiques asymétriques (boutons pilule), la forme avec barre `border-radius: 50px / 20px` définit un rayon horizontal et un rayon vertical pour tous les coins à la fois.

Pourquoi 50% sur un élément non carré crée-t-il une ellipse au lieu d'un cercle ?

Le pourcentage est relatif aux dimensions de la BOÎTE : rayons horizontaux selon la largeur, verticaux selon la hauteur. Sur une boîte 200x100px, border-radius: 50% donne rayon horizontal 100px et vertical 50px — une ellipse. Pour forcer un cercle sur tout rectangle utilisez border-radius: 9999px (px absolu), il se clampe à la moitié du côté le plus court.

Ces formes blob sont-elles performantes ou nuisent-elles au rendu ?

Border-radius est hautement optimisé dans tous les navigateurs — c'est une opération pure de shader GPU, coûtant essentiellement rien à n'importe quelle valeur. Contrairement à clip-path CSS ou aux masques SVG, border-radius NE nécessite PAS de recomputation au redimensionnement. Vous pouvez appliquer des blob à des milliers d'éléments sans impact FPS.

Dois-je utiliser border-radius ou clip-path pour les formes non rectangulaires ?

Border-radius pour les courbes organiques (blobs, formes douces) ; clip-path pour les polygones anguleux (hexagones, étoiles, paths custom). Border-radius anime en douceur. Clip-path est plus puissant pour la géométrie SVG-style mais plus lourd en GPU et difficile à debugger. Pour les composants UI comme cartes et avatars, préférez border-radius. Pour les séparateurs décoratifs, clip-path ou SVG.