CSS Border Radius Generator: Erstellen Sie visuell abgerundete Ecken
Need rounded corners on a card, button, or avatar? The CSS Border Radius Generator lets you build border-radius values visually: use one value for all corners or set each corner separately, choose px or %, and copy the CSS with one click.
Beispiel: Wählen Sie das "Medium"-Preset für 8px an allen Ecken oder "Circle" für 50% (perfekt für quadratische Avatare). Verwenden Sie "Per corner", um nur die obere (z.B. Modale) oder untere (z.B. Bottom Sheets) Ecke abzurunden. Ändern Sie den Hintergrund der Vorschau, um die Form klar zu sehen. Kopieren Sie das CSS und fügen Sie es in Ihr Stylesheet ein.
Was ist border-radius?
border-radius ist eine CSS-Eigenschaft, die die Ecken des Randbereichs eines Elements abrundet. Sie können einen Wert für alle vier Ecken festlegen oder jede Ecke separat einstellen (oben links, oben rechts, unten rechts, unten links). Werte können in px (feste Größe) oder % (relativ zum Element) angegeben werden — 50% auf einem Quadrat ergibt einen Kreis.
Warum einen Border Radius Generator verwenden?
Visuelles Feedback — Sehen Sie die abgerundete Form in einem Vorschau-Box, bevor Sie den Code kopieren.
Ecke für Ecke Kontrolle — Runden Sie nur einige Ecken ab (z.B. nur oben für Modale), ohne die Reihenfolge der vier Werte auswendig zu lernen.
Einheiten — Wechseln Sie zwischen px und %; verwenden Sie Presets wie Pill (9999px) oder Circle (50%) und passen Sie von dort aus an.
Presets — Keine, Klein, Mittel, Groß, XL, Pill, Circle, Nur oben, Nur unten.
Keine Anmeldung — Kostenlos, clientseitig und funktioniert offline, sobald die Seite geladen ist.
Wie das Tool funktioniert
- Verwenden Sie die Vorschau, um den aktuellen Randradius zu sehen (und optional den Hintergrund der Vorschau zu ändern).
- Wählen Sie "Alle Ecken gleich" für einen Wert oder "Per corner" für vier Werte (oben links, oben rechts, unten rechts, unten links).
- Wählen Sie die Einheit: px oder %.
- Kopieren Sie das CSS aus der Ausgabe und fügen Sie es in Ihr Projekt ein.
- Probieren Sie Presets (z.B. Circle, Pill, Nur oben) aus, um einen Stil zu starten.
Syntax: Ein Wert gilt für alle Ecken; vier Werte gehen im Uhrzeigersinn von oben links.
Anwendungsfälle
Karten und Panels — Leicht abgerundete Ecken (z.B. 8px) für einen modernen Look.
Buttons — Kleiner Radius für Buttons oder Pillenform für vollflächige Pillen.
Avatare und Icons — 50% auf einem quadratischen Element für einen Kreis.
Modale und Sheets — Nur die oberen Ecken abrunden oder nur die unteren, für angehängte Overlays.
Häufig gestellte Fragen
Wann sollte ich px vs % verwenden?
Verwenden Sie px für feste Abrundungen (z.B. 8px auf Karten). Verwenden Sie %, wenn Sie möchten, dass der Radius mit dem Element skaliert — 50% auf einem Quadrat ergibt einen Kreis; auf einem Rechteck gibt es pillenartige Enden.
Was ist eine Pillenform?
Eine Pille ist ein Rechteck mit vollständig abgerundeten kurzen Enden. Verwenden Sie einen großen Wert (z.B. 9999px) oder 50%, sodass der Radius mindestens die Hälfte der Seitenlänge beträgt, was halbrunde Enden ergibt.
Probieren Sie den CSS Border Radius Generator aus
CSS Border Radius Generator
Generate CSS border-radius values visually. Set one value for all corners or per-corner radii in px or %. Copy the CSS instantly.
The CSS Border Radius Generator is free, works in your browser, and requires no sign-up. Choose all-corners or per-corner, set px or %, try presets, and copy the CSS with one click — perfect for cards, buttons, avatars, and modals.
Related Tools
- CSS Box Shadow Generator — Create box-shadow values visually
- Gradient Generator — Create linear, radial, and conic CSS gradients
- Color Contrast Checker — Check contrast ratios for accessibility
- Font Pairing — Preview and test typography combinations