CSS-Werkzeuge/Rahmenradius-Generator
Rahmenradius-Generator
CSS border-radius Werte mit visuellen Steuerelementen und Vorlagen erstellen
Steuerung
Visueller Editor
8px
8px
8px
8px
Eckengriffe ziehen um Radius anzupassen
Rahmenradius
8px
Vorlagen
Vorschau
200px
Vorschau mit aktuellen Einstellungen
CSS-Code
border-radius: 8px;Rahmenradius-Anleitung
Lernen Sie, wie Sie mit CSS abgerundete Ecken erstellen
Was ist Border Radius?
Die CSS-Eigenschaft border-radius rundet die Ecken des äußeren Rahmenrandes eines Elements ab. Sie können einen einzelnen Radius für kreisförmige Ecken festlegen oder verschiedene Radien für jede Ecke angeben, um komplexere Formen zu erstellen. Es ist eine der am häufigsten verwendeten CSS-Eigenschaften im modernen Webdesign.
So verwenden Sie dieses Tool
- Ziehen Sie die Eckengriffe, um die Radiuswerte visuell anzupassen
- Aktivieren Sie 'Ecken verknüpfen', um alle zusammen oder einzeln zu bearbeiten
- Wählen Sie den Einheitentyp (px, % oder rem) nach Bedarf
- Verwenden Sie Vorlagen für gängige Muster, dann kopieren Sie den CSS-Code
Profi-Tipps
Browser-Unterstützung
border-radius wird in allen modernen Browsern einschließlich Chrome, Firefox, Safari und Edge unterstützt. Es hat ausgezeichnete Kompatibilität und ist sicher für den Produktionseinsatz.
Häufig gestellte Fragen
Wie erstelle ich einen perfekten Kreis mit border-radius?
Setzen Sie border-radius auf 50% bei einem quadratischen Element (gleiche Breite und Höhe). Dies erzeugt einen perfekten Kreis unabhängig von der Größe. Bei Rechtecken erzeugt 50% stattdessen eine Ellipse.
Was ist der Unterschied zwischen px und % Einheiten?
Pixelwerte (px) erzeugen abgerundete Ecken fester Größe, die nicht mit dem Element skalieren. Prozentwerte (%) sind relativ zu den Abmessungen des Elements - 50% erzeugt immer die maximal mögliche Rundung. Verwenden Sie px für konsistente Ecken, % für responsive Designs.
Kann ich für jede Ecke verschiedene Radien verwenden?
Ja, border-radius akzeptiert 1-4 Werte: 1 Wert gilt für alle Ecken, 2 Werte setzen oben-links/unten-rechts und oben-rechts/unten-links, 4 Werte setzen jede Ecke einzeln (oben-links, oben-rechts, unten-rechts, unten-links).
Wie erstelle ich eine asymmetrische Blob-Form?
Verwenden Sie 8 Werte für vollständige Kontrolle: border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px. Die Werte vor '/' steuern die horizontalen Radien, die Werte nach '/' steuern die vertikalen Radien für jede Ecke.
Beeinflusst border-radius den Inhalt des Elements?
Border-radius rundet nur den visuellen Rahmen ab. Inhalte können weiterhin in die Ecken überlaufen, es sei denn, Sie setzen auch 'overflow: hidden'. Dies schneidet den Inhalt so zu, dass er der abgerundeten Form entspricht - nützlich für Bilder in abgerundeten Containern.