CSS Border-Radius-Generator — Kostenlos Online
Erzeugen Sie CSS-Border-Radius visuell. Steuern Sie alle vier Ecken unabhaengig.
Who uses the CSS Border-Radius-Generator?
- Frontend-Entwickler, die border-radius-Werte für Design-System-Komponenten generieren.
- UI-Designer, die Eckenrundungsoptionen testen, um das richtige visuelle Gewicht zu erreichen.
- CSS-Einsteiger, die border-radius-Eigenschaften durch interaktive visuelle Erkundung lernen.
How the CSS Border-Radius-Generator works
Verwenden Sie die Regler, um den Radius jeder der vier Ecken unabhängig zu steuern.
Aktivieren Sie „Link all corners“, damit sich alle vier Regler für gleichmäßige Rundung gemeinsam bewegen.
Betrachten Sie die Form live an einem Beispiel-Kartenelement.
Kopieren Sie den generierten CSS-border-radius-Wert zur direkten Verwendung in Ihrem Stylesheet.
Tips & tricks
- Deaktivieren Sie „Link all corners“, um asymmetrische Ecken zu gestalten — nützlich für Sprechblasen- oder Tab-artige Formen.
- Das generierte CSS verwendet einen Radius pro Ecke (border-radius: TL TR BR BL) — für elliptische Ecken bearbeiten Sie den kopierten Wert manuell mit der Schrägstrich-Syntax.
- Die Eckreihenfolge in der CSS-Kurzschreibweise verläuft immer im Uhrzeigersinn beginnend oben links — passend zu den Slider-Beschriftungen in diesem Tool.
- Sehr hohe Radiuswerte an einem kleinen Element wirken visuell begrenzt, sobald sich die Ecken in der Mitte treffen.
Frequently Asked Questions
Was ist die CSS-border-radius-Kurzschreibweise?
Ein Wert: border-radius: 8px (alle Ecken gleich). Vier Werte: border-radius: 10px 20px 30px 40px (oben-links, oben-rechts, unten-rechts, unten-links im Uhrzeigersinn). Zwei Werte: border-radius: 10px 20px (OL+UR, OR+UL).
Wie erstelle ich einen perfekten Kreis mit CSS?
Setzen Sie border-radius: 50% auf ein quadratisches Element (gleiche Breite und Höhe). Bei nicht-quadratischen Elementen erzeugt 50% eine Ellipse. Verwenden Sie border-radius: 50% auf einem div mit übereinstimmender Breite und Höhe für einen Kreis.
Was sind elliptische Eckenradien?
CSS border-radius unterstützt separate horizontale und vertikale Radien pro Ecke über eine 8-Werte-Syntax: border-radius: 10px 40px / 40px 10px erzeugt eine organische Blob-Form. Dieses Tool generiert diese Syntax nicht — es steuert einen Radiuswert pro Ecke.
Kann ich organische Blob-Formen mit border-radius erstellen?
Ja, mit der vollständigen 8-Werte-Syntax von CSS (unterschiedliche horizontale und vertikale Radien pro Ecke), von Hand geschrieben. Dieses Tool deckt den häufigeren Fall mit einem Radius pro Ecke ab; für elliptische/Blob-Formen schreiben Sie den border-radius-Wert direkt.
Welcher Wert erzeugt typische abgerundete „Karten“-Ecken?
4–8px ist Standard für dezente Karten. 12–16px ist üblich für moderne UI-Karten. 24px+ wird für „Pill“- oder „Chip“-Elemente verwendet. Werte nahe 50 auf einer kleinen Karte wirken extrem.
Is my data safe when using the CSS Border-Radius-Generator?
Completely safe. The CSS Border-Radius-Generator processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the CSS Border-Radius-Generator output in commercial projects?
Yes. The CSS Border-Radius-Generator is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the CSS Border-Radius-Generator follow official standards?
Yes. The CSS Border-Radius-Generator is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.