CSS border-radius Generator mit Live-Vorschau
Runde Ecken visuell einstellen und das CSS kopieren. Steuerung pro Ecke, elliptische Radien, px oder %, Presets von Pille bis Blob, mit Live-Vorschau.
CSS border-radius Generator mit Live-Vorschau wird geladen… Wenn nichts passiert, aktiviere JavaScript.
Die CSS-Eigenschaft border-radius rundet die Ecken eines Elements ab und ist eine der wenigen Eigenschaften, die den Charakter einer ganzen Oberfläche verändern. Buttons wirken freundlicher mit 8 Pixeln Rundung, Karten sehen bei 12 bis 16 modern aus, Avatare werden bei 50 Prozent zu Kreisen, und Tags verwandeln sich in Pillen, sobald der Radius die halbe Höhe überschreitet. Mit diesem Generator stellst du diese Werte über Schieberegler und Zahlenfelder ein, siehst das Ergebnis sofort und kopierst am Ende eine einzige Zeile CSS in dein Stylesheet. Keine Anmeldung, kein Exportschritt, und nichts verlässt deinen Browser.
Häufig gestellte Fragen
Wie erzeuge ich mit border-radius einen Kreis?
Was bedeutet der Schrägstrich in einem border-radius-Wert?
Sollte ich Pixel oder Prozent verwenden?
In welcher Reihenfolge gelten die vier Werte?
Warum sieht mein Radius kleiner aus als der eingestellte Wert?
Beschneidet border-radius den Inhalt im Element?
Ist das CSS mit älteren Browsern kompatibel?
Kann ich das für Bilder und Buttons verwenden?
Wird irgendetwas hochgeladen?
Über CSS border-radius Generator mit Live-Vorschau
border-radius kann mehr, als die meisten davon nutzen. Jede der vier Ecken lässt sich unabhängig einstellen, und genau so entstehen Blattformen, Sprechblasen, Ticketkanten und asymmetrische Karten. Jede Ecke kann außerdem elliptisch statt kreisförmig sein, also einen horizontalen und einen vertikalen Radius erhalten, geschrieben mit einem Schrägstrich: border-radius: 60px 20px 60px 20px / 30px 60px 30px 60px. Diese Schrägstrich-Syntax erzeugt hier der Schalter "Elliptische Ecken", und sie ist der Trick hinter den organischen Blob-Formen moderner Landingpages. Das Preset "Blob" erzeugt acht zufällige Werte, sodass du durchklicken kannst, bis etwas passt.
Die Wahl zwischen Pixeln und Prozent wiegt schwerer, als es zunächst scheint. Ein Pixelradius ist absolut: 20px bleiben 20px, ob das Element ein kleines Abzeichen oder eine breite Hero-Fläche ist. Ein Prozentradius bezieht sich auf die Maße des Elements selbst, horizontal auf die Breite und vertikal auf die Höhe, deshalb ergibt 50% immer eine perfekte Ellipse, und eine in Prozent definierte Form behält ihre Proportionen, wenn das Element skaliert wird. Darum liegen Avatare meist bei 50% und Buttons bei einem festen Pixelwert. Nutze den Einheitenschalter, um den Unterschied zu sehen: verändere die Vorschaubox mit den Reglern für Breite und Höhe und beobachte, wie sich eine Prozentform mitbewegt, während eine Pixelform starr bleibt.
Alles wird in deinem Browser mit derselben CSS-Engine gezeichnet, die später deine Website darstellt, die Vorschau ist also keine Annäherung, sondern das echte Ergebnis. Nutze den Schachbretthintergrund, um Formen gegen Transparenz zu beurteilen, schalte den Bildhintergrund ein, um zu sehen, wie ein Foto von den Ecken beschnitten wird, und kopiere das CSS, wenn es passt. Gibst du einen Radius ein, der größer ist, als das Element aufnehmen kann, verkleinern Browser alle Radien proportional, statt sie überlappen zu lassen. Deshalb ergibt ein sehr großer Pixelwert auf einer flachen Box eine saubere Pille statt einer kaputten Form.
Der lange Streit um runde Ecken
Runde Ecken waren eine Designobsession, lange bevor CSS sie erzeugen konnte. 1981, beim Bau des ersten Macintosh, hatte Bill Atkinson schnelle Routinen für Kreise und Ovale geschrieben, weigerte sich aber, abgerundete Rechtecke hinzuzufügen, weil ihm die Mathematik zu langsam erschien. Steve Jobs führte ihn um den Block und zeigte auf abgerundete Rechtecke an Verkehrsschildern und Autofenstern, bis Atkinson nachgab; die daraus entstandenen RoundRects-Routinen prägten das Aussehen der Mac-Oberfläche und damit der grafischen Computerwelt.
Im Web dauerte es lange. Anfang der 2000er bedeutete eine runde Box, ein Layout in Photoshop in Eckbilder zu zerschneiden und mit verschachtelten div-Elementen wieder zusammenzunähen, ein Vorgehen, das so verbreitet war, dass es einen Namen hatte: die Sliding-Doors-Technik. Manche Entwickler erzeugten Ecken mit Tabellen, andere mit JavaScript-Bibliotheken, die sie zur Laufzeit zeichneten. border-radius wurde für CSS3 vorgeschlagen und kam zunächst hinter Herstellerpräfixen, als -moz-border-radius 2005 in Firefox und danach als -webkit-border-radius in Safari, weshalb reale Stylesheets jahrelang drei Kopien jeder Eckdeklaration mitschleppten. Der Internet Explorer unterstützte es erst in Version 9 von 2011, und genau da löschten die meisten Teams endlich ihre Eckbilder.
Die gestalterische Debatte endete nie wirklich, sie verschob sich nur. Apples eigene Icon-Formen wanderten von einfachen Kreisecken zum Squircle, einer Superellipse, deren Krümmung kontinuierlich verläuft, statt von der geraden Kante in den Bogen zu springen, weil der Übergang dem Auge weicher erscheint. Designer jagen diesem Effekt seither in CSS nach, mit elliptischen Radien, SVG-Pfaden und nun der experimentellen Eigenschaft corner-shape. Zugleich schwingt das Geschmackspendel weiter: die Flat-Design-Ära Mitte der 2010er kürzte die Radien auf fast nichts, und die heutige Vorliebe für weiche, freundliche Oberflächen hat sie wieder wachsen lassen. Die Eigenschaft ist eine einzige Zeile CSS, aber über die Zahl darin wird seit vierzig Jahren gestritten.