Mehr als nur runde Ecken
Mit border-radius runden Sie die Ecken eines Elements ab. Im einfachsten Fall gilt ein Wert für alle vier Ecken. Der Generator lässt Sie die Ecken verbinden oder einzeln einstellen: oben links, oben rechts, unten rechts und unten links, jeweils in Pixeln oder Prozent.
Pixelwerte ergeben einen festen Radius, der unabhängig von der Größe des Elements gleich bleibt, ideal für Karten und Buttons. Prozentwerte beziehen sich auf Breite und Höhe des Elements: 50 % macht aus einem Quadrat einen Kreis und aus einem Rechteck eine Ellipse. Für eine Pillenform mit halbrunden Enden genügt ein sehr großer Pixelwert.
Optional schalten Sie elliptische Ecken ein. Dann hat jede Ecke einen horizontalen und einen vertikalen Radius, geschrieben mit Schrägstrich: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%. Mit diesen acht Werten entstehen organische Blob-Formen, wie sie in modernen Designs beliebt sind. Vorlagen für Pille, Kreis und Blob liefern einen schnellen Start. Der Generator gibt stets die kürzeste gültige Schreibweise aus, etwa 8px statt 8px 8px 8px 8px. Für ein stimmiges Design lohnt sich eine kleine Skala an Radien, etwa 4px für Eingabefelder, 8px für Buttons und 16px für Karten. Liegen Elemente ineinander, wirkt es harmonisch, wenn der innere Radius dem äußeren Radius minus dem Abstand dazwischen entspricht. Beachten Sie auch, dass border-radius nicht nur den Rahmen, sondern auch Hintergrund, Schatten und Umriss abrundet; Bilder oder Videos im Element werden erst mit overflow: hidden mit beschnitten.
Alles läuft in Ihrem Browser, und der Generator ist kostenlos ohne Begrenzung nutzbar: Live-Vorschau und Kopieren des CSS stehen ohne Pro zur Verfügung.
So erstellen Sie border-radius
- Mit einer Vorlage (Pille, Kreis, Blob) beginnen oder frei starten.
- Einheit px oder % wählen.
- Ecken verbunden oder einzeln einstellen.
- Bei Bedarf elliptische Ecken aktivieren und horizontale und vertikale Radien setzen.
- Den kürzesten border-radius-Code kopieren.
Typische Einsatzzwecke
- Buttons, Karten und Eingabefelder mit einheitlichen Rundungen.
- Runde Profilbilder und Avatare.
- Pillenförmige Tags, Badges und Schalter.
- Organische Blob-Formen als Hintergrunddekoration.
- Sprechblasen mit einer spitzen Ecke.
Die Kurzschreibweise verstehen
- Ein Wert (12px): alle vier Ecken gleich.
- Zwei Werte (12px 4px): oben links und unten rechts, dann oben rechts und unten links.
- Drei Werte (12px 4px 8px): oben links, oben rechts und unten links, unten rechts.
- Vier Werte: im Uhrzeigersinn ab oben links.
- Schrägstrich: Werte davor sind horizontale, Werte danach vertikale Radien.
Häufig gestellte Fragen
Ist der Border Radius Generator kostenlos?
Ja, ohne Begrenzung. Vorschau und Kopieren des CSS sind frei, Pro ist dafür nicht nötig.
Wie mache ich einen Kreis?
Mit border-radius: 50% auf einem Element mit gleicher Breite und Höhe.
px oder %?
px für gleichbleibende Rundungen bei Karten und Buttons, % für Formen, die mit der Größe des Elements skalieren.
Was bedeutet der Schrägstrich?
Er trennt horizontale und vertikale Radien. So entstehen elliptische Ecken und Blob-Formen.
Werden Inhalte abgeschnitten?
Nur mit overflow: hidden. Ohne diese Angabe können Inhalte über die abgerundeten Ecken hinausragen.