border-radius CSS
Gratuit, sans inscription, fonctionne dans votre navigateur.
Le blob le plus court en CSS : huit pourcentages sur une propriété, aucun SVG nulle part. C'est une forme réellement différente des blobs SVG, et elle est proposée comme telle plutôt que comme le même blob dans un autre format.
Un export border-radius CSS, réduit aux premières lignes
.blob {
width: 320px;
height: 320px;
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}Ce qu'il faut savoir
- Une propriété sur un élément que vous avez déjà — rien à coller dans le balisage.
- Quatre coins seulement : il ne peut pas reproduire un blob à six lobes et ne fait pas semblant.
- S'anime et se transitionne en douceur, ce qu'un tracé SVG ne fait pas sans travail supplémentaire.
- Les valeurs sont générées à l'intérieur de la limite de mise à l'échelle du navigateur : ce que vous voyez est ce qui s'affiche.
Compatibilité des navigateurs
Universelle. La syntaxe à huit valeurs avec barre oblique est prise en charge depuis la propriété elle-même. Blobs uniquement — une vague n'a pas d'équivalent à quatre coins, et c'est pourquoi ce format est désactivé sur le générateur de vagues plutôt que de produire discrètement quelque chose de faux.
Taille sur l'ensemble des préréglages
Tous les préréglages que ce format peut exprimer, mesurés tels que le générateur les émet. Le plus léger est Hexagone à 94 octets ; le plus lourd est Étincelle à 110 octets. C'est le nombre de points qui fait la différence — chaque point supplémentaire ajoute un segment cubique entier de coordonnées.
| Format | Taille |
|---|---|
| Hexagone | 94 B |
| Éclaboussure | 102 B |
| Galet | 104 B |
| Fleur | 104 B |
| Bulle | 106 B |
| Triangle arrondi | 108 B |
| Cristal | 108 B |
| Blob doux | 110 B |
| Blob organique | 110 B |
| Gemme facettée | 110 B |
| Étoile | 110 B |
| Étincelle | 110 B |
Plus en détail
Il existe dans la spécification CSS une règle qui piège presque tous les générateurs de ce genre. Si les deux rayons qui se rejoignent sur un bord dépassent à eux deux la longueur de ce bord, le navigateur calcule un unique facteur d'échelle à partir du pire bord et multiplie **tous** les rayons par lui. Une mauvaise paire n'aplatit pas seulement un coin — elle réduit l'arrondi de la forme entière, et le navigateur dessine donc quelque chose de visiblement différent de l'aperçu. Les paires sont ici générées pour que chacune ne dépasse pas 100 %, ce qui rend ce facteur exactement égal à 1 par construction et non par chance.
Questions
Quelles formes fonctionnent en border-radius CSS ?
Ce format couvre Blob. C'est une contrainte réelle et non une limite de cet outil : lorsqu'un générateur manque à cette liste, le format est véritablement incapable de l'exprimer, et le proposer quand même vous remettrait quelque chose qui dessine silencieusement la mauvaise forme.
Quelle taille fait un export border-radius CSS ?
Entre 94 et 110 octets sur les 12 préréglages qui le prennent en charge. Moins de points est le levier qui compte ; la douceur et la couleur ne coûtent rien.
Puis-je le modifier à la main ensuite ?
Oui. La sortie est du texte brut sans commentaire de générateur, sans balisage identifiant et sans lien de retour vers ce site. Changez les couleurs, renommez la classe, ou collez le tracé dans votre propre SVG — rien en aval ne dépend de son état d'origine.
Chaque chiffre et chaque forme de cette page ont été produits en exécutant le générateur au moment de la compilation : ils décrivent donc l'outil que vous vous apprêtez à utiliser, et non une version qui a existé un jour.