So nutzt du: 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.
Auch gesucht als: css border radius, rounded corners css, css blob generator, fancy border radius, css rounded corners generator, border radius online.
Passende Tools zu: 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.
Häufige Fragen
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.
Kann ich Border Radius Generator als Web-App installieren und offline nutzen?
Ja. Border Radius Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.