Border-Radius Generator
Erstellen Sie CSS border-radius mit Vorschau.
Esquinas (horizontal)
border-radius: 16px;CSS-Generator für abgerundete Ecken (border-radius)
Die CSS-Eigenschaft border-radius ermöglicht das Abrunden der Ecken jedes HTML-Elements, von subtilen abgerundeten Ecken bis hin zu vollständigen Kreisformen. Sie ist eine der am häufigsten verwendeten Eigenschaften im modernen Webdesign, die praktisch auf jeder Website und in jeder aktuellen Anwendung zu finden ist. Schaltflächen, Karten, Avatare, Bilder und Container profitieren von abgerundeten Ecken, die die Benutzeroberfläche weicher machen und freundlichere, modernere Designs schaffen.
Unser Generator ermöglicht es Ihnen, jede Ecke einzeln anzupassen oder sie zu verknüpfen, um alle gleichzeitig zu ändern. Er unterstützt auch den elliptischen border-radius (erweiterter Modus), der die 8-Werte-Syntax verwendet, um komplexere organische und asymmetrische Formen zu erstellen. Die elliptische Syntax definiert horizontale und vertikale Radien, getrennt durch einen Schrägstrich '/', und ermöglicht die Erstellung von Tropfen, Blättern und anderen organischen Figuren, die mit gleichmäßigen Radien unmöglich wären.
Das Tool enthält gängige Voreinstellungen wie Quadrat, Abgerundet, Pille, Blatt, Tropfen und Ticket, die als Ausgangspunkt dienen und nach Belieben angepasst werden können. Die Vorschau wird in Echtzeit aktualisiert und der CSS-Code wird automatisch generiert, bereit zum Kopieren und Einfügen in Ihr Projekt.
Häufig gestellte Fragen
Was ist der elliptische border-radius?
Der elliptische border-radius verwendet die 8-Werte-Syntax: Die ersten 4 definieren die horizontalen Radien und die letzten 4 die vertikalen, getrennt durch '/'. Dies ermöglicht Ecken mit asymmetrischen Kurven und erzeugt komplexere organische Formen als der einfache border-radius.
Wie erstelle ich einen perfekten Kreis?
Um einen perfekten Kreis zu erstellen, setzen Sie border-radius: 50% auf ein Element mit gleicher Breite und Höhe. Verwenden Sie in unserem Generator das Preset 'Pille' (100px an allen Ecken) und stellen Sie sicher, dass Ihr Element quadratisch ist.
Ist es mit allen Browsern kompatibel?
Ja, border-radius ist seit Jahren mit allen modernen Browsern kompatibel, einschließlich Chrome, Firefox, Safari, Edge und Opera. Für keinen aktuellen Browser werden Vendor-Präfixe benötigt.