Generator für Eckenradien
Generieren Sie CSS border-radius für jede Ecke mit einer Live-Vorschau.
Kurze Antwort: Generator für Eckenradien: Erstellen Sie CSS-Eckenradien für jede einzelne Ecke mit Live-Vorschau. Läuft vollständig in Ihrem Browser, kostenlos und ohne Registrierung.
Zuletzt aktualisiert
Gut zu wissen
Rounded corners feel simple until you need each corner different, and that is exactly what per-corner control unlocks. Matching modest radii on all four corners gives the friendly, neutral look of most buttons and cards; deliberately mismatched radii produce the soft, organic "blob" shapes that have become a common decorative element behind hero sections and avatars.
One thing worth knowing is the difference between pixel and percentage radii. Pixels give a fixed corner regardless of element size, while a percentage scales with the box — a 50% radius on a square produces a perfect circle, which is the standard trick for round avatar frames. The generator emits pixels in the UI, but swapping px for % in the output is a one-character change.
Because border-radius is an animatable property, adding a CSS transition on it lets a shape morph smoothly between two states on hover. Pair the result with the Box Shadow Generator for depth or the Gradient Generator for a fill, and you have the building blocks of a modern card in a couple of copy-pastes.
Häufig gestellte Fragen
- Ist es kostenlos?
- Ja — kostenlos ohne Anmeldung.
- Kann ich Blob-Formen erstellen?
- Ja — geben Sie jeder Ecke einen sehr unterschiedlichen Radius für einen organischen Blob.
- Welche Einheiten werden unterstützt?
- Pixel in der Benutzeroberfläche; ersetzen Sie px durch % in der Ausgabe für einen prozentualen Radius, wenn Sie es bevorzugen.
- Werden meine Einstellungen hochgeladen?
- Nein — die Vorschau läuft vollständig in Ihrem Browser.
- Animiert es?
- Wenden Sie eine CSS-Transition auf die border-radius-Eigenschaft in Ihrem Stylesheet an, um zwischen zwei Werten zu animieren.