Generateur CSS Border Radius

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

Fonctionnalites principales

• Trois modes: Simple, Avance et Blob
• Mode simple pour un rayon de coin uniforme
• Mode avance pour le controle individuel des coins
• Mode blob pour la creation de formes organiques
• 12 formes predefinies pour commencer
• Generateur de formes blob aleatoires
• Support des unites px et %
• Taille d'apercu personnalisable
• Couleur d'apercu personnalisable
• Apercu en direct
• Copier le code CSS
• Traitement 100% cote client
• Support du mode sombre
• Interface adaptee aux mobiles