CSS Border-Radius Generator

So funktioniert es

Geben Sie links eine Kastenfarbe ein — sie färbt nur die Vorschau, denn border-radius selbst trägt keine Farbe. Stellen Sie dann die vier Eckenregler ein. Im Modus für abgerundete Ecken sind die Werte Pixel, und das Werkzeug schreibt die kürzeste gültige Form: vier gleiche Ecken werden zu einem einzigen border-radius: 16px, gleiche Diagonalen zu zwei Werten. Für Karten und Schaltflächen sind 8 bis 24 Pixel der übliche Bereich; der Standardwert von 16 Pixeln liegt mittendrin. Im Blob-Modus werden die Werte zu Prozenten: jeder Regler bestimmt den HORIZONTALEN Radius seiner Ecke, den vertikalen leitet das Werkzeug als 100 minus Ihrem Wert ab, und der Code erscheint in der Schrägstrich-Schreibweise mit zwei Listen — genau die Notation, die einer Ecke zwei verschiedene Radien gibt und aus dem Rechteck eine organische Form macht. Der Code rechts wird bei jeder Änderung neu geschrieben; kopieren Sie ihn in Ihr Stylesheet oder laden Sie die Vorschau als PNG mit 1200×800 Pixeln herunter.

Dieses Werkzeug ist auch als border radius generator, css ecken abrunden, runde ecken css, border radius css, blob generator css, abgerundete ecken code bekannt.

Was ist border-radius?

border-radius ist die CSS-Eigenschaft, die die Ecken eines HTML-Kastens abrundet. Ein Wert gilt für alle vier Ecken; bis zu vier Werte sprechen jede Ecke einzeln an, und die Schrägstrich-Form gibt jeder Ecke zwei Radien — einen horizontalen und einen vertikalen. Werte können feste Einheiten wie Pixel sein oder Prozente der Kastengröße, weshalb 50 % ein Quadrat in einen Kreis verwandelt. Die Rundung ist reine Zeichnung: sie verschiebt kein Layout und ändert die Kastengröße nicht.

Was ist Blob-Form?

Blob nennt das Webdesign weiche, organische Formen, die eher an Tropfen oder Kieselsteine erinnern als an Rechtecke. In CSS entsteht ein Blob aus einem einzigen Kasten mit border-radius in Schrägstrich-Schreibweise: bekommt jede Ecke einen anderen horizontalen und vertikalen Radius, werden die Ecken zu Viertelellipsen und die rechteckige Silhouette löst sich auf. Beliebt sind Blobs für Hero-Bereiche, Porträtrahmen und Hintergrundschmuck — und weil die Form Code ist, braucht sie keine Bilddatei und bleibt in jeder Größe scharf.

Was ist der Unterschied zwischen Pixel- und Prozentradius?

Ein Pixelradius ist absolut: eine 16-Pixel-Ecke ist gleich groß, ob der Kasten 200 oder 1000 Pixel breit ist — so bleiben Kartenfamilien einheitlich. Ein Prozentwert bezieht sich auf den Kasten selbst: horizontale Radien werden an der Breite gemessen, vertikale an der Höhe. Deshalb erzeugt 50 % auf einem Quadrat einen Kreis, auf einem Rechteck aber eine Ellipse, und die Ecke wächst mit dem Kasten. Die praktische Regel: Pixel für Oberflächenbausteine, Prozente für Formarbeit wie Kreise und Blobs.

Die Überlaufregel: warum 100 Pixel keinen Kreis mehr machen

Ziehen Sie einen Regler ans Ende, ändert sich die Form irgendwann nicht mehr. Das ist kein Fehler, sondern die Überlaufregel von CSS: übersteigt die Summe der beiden Radien an einer Kante deren Länge, verkleinert der Browser ALLE Radien mit demselben Faktor. In eine 200 Pixel breite Schaltfläche passen genau 100 + 100 Pixel; auf einer 300 Pixel breiten Karte haben dieselben Ecken noch Luft. Die Vorschau wendet dieselbe Regel an — die Form, die Sie sehen, ist die Form, die der Browser zeichnet.

Wenn Sie eigentlich einen Kreis oder eine Pillenform wollen, sparen Sie sich die Pixelrechnung: border-radius: 50% macht aus einem quadratischen Kasten einen Kreis, border-radius: 999px aus einer rechteckigen Schaltfläche eine Pille. Ein überdimensionierter Wert wie 999 ist gerade wegen der Überlaufregel sicher — der Browser stutzt ihn auf den größten Radius, der passt.

Welcher Radius für welchen Zweck?

Der Eckenradius spricht eine Sprache wie der Schatten: kleine Radien wirken sachlich, große weich und freundlich.

• Karten, Kästen, Eingabefelder → 8-16 Pixel: die Ecke ist sichtbar, ohne aufzufallen
• Schaltflächen → 8-12 Pixel kantig oder 999 Pixel als Pille: beides üblich, aber pro Seite eine Sprache wählen
• Profilbilder und Abzeichen → 50 %: quadratischer Inhalt wird zum Kreis
• Hero-Grafiken und Hintergründe → Blob-Modus: die Schrägstrich-Schreibweise baut organische Formen

Häufige Fragen

Was bedeutet die Reihenfolge der border-radius-Werte?

Vier Werte laufen im Uhrzeigersinn von oben links: oben links, oben rechts, unten rechts, unten links. Bei weniger Werten übernehmen fehlende Ecken den Wert ihrer Diagonale: bei zwei Werten setzt der erste oben links und unten rechts, der zweite das andere Paar. Dieses Werkzeug schreibt immer die kürzeste gültige Form — Sie sehen den Code schrumpfen, sobald Regler gleich stehen.

Was ist die Schrägstrich-Schreibweise (30% 70% ... / 70% 30% ...)?

Links vom Schrägstrich stehen die horizontalen Radien der Ecken, rechts die vertikalen. Unterscheiden sich beide, zeichnet die Ecke keine Viertelkreise mehr, sondern Viertelellipsen — genau daher kommt der organische Blob-Look. Im Blob-Modus leitet dieses Werkzeug die vertikale Liste als 100 minus Ihrem horizontalen Wert ab: Regler auf 30 ergibt vertikal 70. Die Regel ist fest, das Ergebnis vorhersagbar.

Warum taucht meine Farbe nicht im Code auf?

Weil border-radius nur die Geometrie der Ecken beschreibt; Farbe gehört zu eigenen Eigenschaften wie background-color. Das Farbfeld hier füllt die Vorschau, damit Sie die Form gegen eine echte Fläche beurteilen können. Beim Einfügen des Codes gelten die Ecken für die Farbe, die Ihr Element ohnehin hat.

Was speichert der Herunterladen-Knopf?

Ein PNG der Vorschauform mit 1200×800 Pixeln — praktisch, um die Eckenform in eine Designabstimmung zu geben. Für den Code selbst nutzen Sie den Kopierknopf; und wenn Sie die Ecken einer echten Bilddatei abrunden wollen, übernimmt das das Bild-Eckenwerkzeug dieser Website.