CSS Border Radius Generator
Border-radius visuell gestalten und fertigen CSS-Code erhalten
Border Radius Steuerung
Live-Vorschau
CSS-Ausgabe
Anwendungsbeispiele
Perfekter Kreis
Erstellen Sie ein perfekt rundes Element mit 50% Border Radius an allen Ecken.
Pillenform
Gestalten Sie einen pillenfoermigen Button mit grossen horizontalen Border Radius Werten.
Organische Form
Erstellen Sie einzigartige organische Formen durch verschiedene Werte fuer jede Ecke.
Funktionen
Live visuelle Vorschau
Sehen Sie den Border Radius Effekt in Echtzeit aktualisiert, waehrend Sie die Schieberegler anpassen
Individuelle Eckensteuerung
Passen Sie jede Ecke unabhaengig an oder verbinden Sie alle fuer einen einheitlichen Border Radius
Voreingestellte Formen
Schneller Zugriff auf gaengige Formen wie Kreis, Pille, abgerundetes Rechteck und benutzerdefiniert
Datenschutz zuerst
Alles laeuft in Ihrem Browser ab — keine Daten werden an Server gesendet
Wie benutzt man es?
Ecken anpassen
Verwenden Sie die Schieberegler, um den Border Radius jeder Ecke einzustellen, oder aktivieren Sie den Verbindungsmodus fuer einheitliche Werte.
Form vorschauen
Beobachten Sie, wie sich die Live-Vorschau sofort aktualisiert, wenn Sie die Radiuswerte aendern.
CSS kopieren
Klicken Sie auf die Schaltflaeche CSS kopieren, um den generierten Border-Radius-Code in die Zwischenablage zu kopieren.
Haeufig gestellte Fragen
Was macht dieses Tool?
Dieser Border-Radius-Generator ermoeglicht es Ihnen, abgerundete Ecken fuer CSS-Elemente visuell zu gestalten. Ziehen Sie die Schieberegler, beobachten Sie die Vorschau in Echtzeit und kopieren Sie den generierten CSS-Code mit einem Klick. Kein Raten von Pixelwerten mehr im Stylesheet.
So funktioniert border-radius in CSS
Die CSS-Eigenschaft border-radius akzeptiert Werte in Pixeln, Prozent oder ems fuer jede Ecke. Sie koennen alle vier Ecken gleichzeitig mit der Kurzschreibweise (border-radius: 10px) oder jede einzeln steuern. Prozentwerte beziehen sich auf die Elementabmessungen, weshalb 50% bei einem Quadrat einen Kreis erzeugt.
Voreingestellte Formen und individuelle Designs
Starten Sie schnell mit Voreinstellungen fuer Kreise, Pillenformen und abgerundete Rechtecke. Oder experimentieren Sie mit asymmetrischen Werten an jeder Ecke, um organische Blob-Formen zu erstellen, die im modernen UI-Design beliebt sind.
Kompatibel mit allen modernen Browsern
Die border-radius-Eigenschaft wird von Chrome, Firefox, Safari und Edge unterstuetzt. Die von diesem Tool erzeugte Kurzschreibweise ist das kompatibelste Format und kann ohne Vendor-Praefixe direkt in Ihr Projekt eingefuegt werden.