Comment utiliser : Border Radius Generator
- Drag the slider to round all four corners — or choose Each corner to set top-left, top-right, bottom-right and bottom-left separately.
- Switch the unit:
pxfor fixed rounding,%to scale with the element (50% on a square makes a circle). - Choose Elliptical or Random blob for organic shapes with 8 values.
- Copy the CSS — it is shortened to the fewest values that give the same shape.
How border-radius values work
| CSS | Corners |
|---|---|
border-radius: 12px | all four |
border-radius: 12px 4px | top-left & bottom-right, top-right & bottom-left |
border-radius: 12px 8px 4px 0 | top-left, top-right, bottom-right, bottom-left (clockwise) |
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% | elliptical: horizontal radii / vertical radii — blob shapes |
Pill buttons: use a large value like 9999px — the browser caps it at half the height, so the ends stay round at any size. Circles: 50% on a square element. Percentages are relative to the box’s width (horizontal radii) and height (vertical radii).
Related: Box Shadow Generator, CSS Gradient Generator, Glassmorphism Generator.
Aussi recherché comme : css border radius, rounded corners css, css blob generator, fancy border radius, css rounded corners generator, border radius online.
Outils complémentaires : Border Radius Generator
- CSS Grid Generator — Set the columns, rows and gap, then drag across cells to make areas like header, sidebar and main.
- CSS Filter Generator — Adjust blur, brightness, contrast, saturation, hue, grayscale, sepia, invert and drop shadow on a sample or your own image and copy the filter CSS.
- Cubic Bezier Generator — Shape an easing curve by dragging two handles and race it against standard easings.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Questions fréquentes
How do I make rounded corners in CSS?
Use border-radius, e.g. border-radius: 12px for all corners, or four values for top-left, top-right, bottom-right and bottom-left.
How do I make a pill-shaped button?
Set border-radius to a large value such as 9999px. The browser limits it to half the height, so the ends are always perfectly round.
How do I make a circle?
Give the element equal width and height and border-radius: 50%.
What does the slash in border-radius mean?
Values before the slash are horizontal radii and after it vertical radii, so each corner becomes an ellipse — that is how blob shapes are made.
Puis-je installer Border Radius Generator en tant qu’application web et l’utiliser hors ligne ?
Oui. Border Radius Generator est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.