CSS-Rahmenradiusgenerator
CSS Border Radius Generator ist ein kostenloses Online-Tool, mit dem Sie visuell perfekt abgerundete Ecken für Ihre HTML-Elemente erstellen können. Anstatt Pixelwerte zu erraten, verwenden Sie interaktive Steuerelemente, um jede Ecke unabhängig voneinander anzupassen oder sie für eine gleichmäßige Rundung miteinander zu verknüpfen. Das Werkzeug unterstützt sowohl Pixel- als auch Prozenteinheiten, bietet voreingestellte Formen (Kreis, Ellipse, Blatt, Sprechblase) und zeigt während der Anpassung eine Live-Vorschau Ihres Elements an. Kopieren Sie die generierte CSS-Eigenschaft border-Radius mit allen Herstellerpräfixen sofort. Perfekt für die Erstellung moderner Karten-UIs, kreisförmiger Avatare, pillenförmiger Knöpfe und kreativer geometrischer Formen.
Was ist
Die CSS-Eigenschaft border-radius rundet die Ecken der äußeren Randkante eines Elements ab. Es ist eine der am häufigsten verwendeten CSS-Eigenschaften zum Erstellen optisch ansprechender, moderner Oberflächen. Die Eigenschaft border-radius kann 1 bis 8 Werte annehmen: - Einzelwert: Randradius: 10 Pixel (alle vier Ecken gleich) - Zwei Werte: Randradius: 10px 20px (oben links / unten rechts, oben rechts / unten links) - Drei Werte: Randradius: 10px 20px 30px (oben links, oben rechts / unten links, unten rechts) - Vier Werte: Randradius: 10px 20px 30px 40px (oben links, oben rechts, unten rechts, unten links im Uhrzeigersinn) - Acht Werte (Ellipse): Randradius: 10px 20px 30px 40px / 50px 60px 70px 80px (horizontale / vertikale Radien für elliptische Ecken) Kurzschrift vs. Langschrift: - Randradius: 10 Pixel (Kurzschrift, alle vier Ecken) - rand-oben-links-Radius: 10 Pixel (einzelne Ecke) - rand-oben-rechts-Radius: 20 Pixel - Randradius unten rechts: 30 Pixel - Randradius unten links: 40 Pixel Prozentsatz vs. Pixelwerte: - Randradius: 50% (erzeugt einen Kreis / eine Ellipse relativ zu den Abmessungen des Elements) - Randradius: 10 Pixel (fester Pixelwert, skaliert nicht mit der Elementgröße) - Verwenden Sie für Kreise 50% auf einem quadratischen Element - Verwenden Sie für Pillenformen 9999 Pixel oder 50% für rechteckige Elemente Häufige Anwendungsfälle: - Kreisförmige Bilder / Avatare: 50% - Pillenförmige Tasten: 9999 Pixel oder 25% der Höhe - Kartenecken: 8-16 Pixel - Dialogmodalitäten: 8-12 Pixel - Blatt / blattartige Formen: asymmetrische Radiuswerte Die interaktive Vorschau wird beim Ändern der Eckwerte angepasst, sodass Sie den Effekt sofort visualisieren können.
Wie zu verwenden
- Wählen Sie Ihren Einstellmodus: Verknüpfen Sie alle Ecken für eine gleichmäßige Rundung oder lösen Sie die Verknüpfung, um jede Ecke unabhängig voneinander anzupassen. Das Werkzeug zeigt eine visuelle Darstellung aller vier Ecken (oben links, oben rechts, unten rechts, unten links).
- Ziehen Sie die Schieberegler oder geben Sie Pixelwerte ein, um den Eckenradius anzupassen. Beobachten Sie die Aktualisierung des Vorschauelements in Echtzeit, während Sie Werte ändern. Verwenden Sie den Prozentmodus für reaktionsschnelles oder formbezogenes Runden.
- Aktivieren Sie den Ellipsenmodus (erweitert), um für jede Ecke unterschiedliche horizontale und vertikale Radien festzulegen und elliptische statt kreisförmige Ecken zu erstellen. Dies ermöglicht organische, blobartige Formen.
- Probieren Sie voreingestellte Formen aus der Galerie aus: Kreis, Ellipse, Blatt, Blume, Talk Blob, Tabulatorform und mehr. Wenn Sie auf eine Vorgabe klicken, werden die entsprechenden Randradiuswerte sofort auf die Vorschau angewendet.
- Vergleichen Sie Original und abgerundet, indem Sie die Vorschau zwischen scharfkantigem und abgerundetem Zustand umschalten. Dies hilft Ihnen, die genaue Transformation zu sehen, die Ihr CSS erzeugen wird.
- Kopieren Sie den CSS-Code für den Randradius aus dem Ausgabefenster. Sowohl die Kurzschrift (z. B. border-radius: 10px 20px;) als auch einzelne Eigenschaften (border-top-left-radius: usw.) bereitgestellt werden.
Beispiele
Eingabe: TL:20px TR:20px BL:0 BR:0
Prozess: Apply asymmetric radius to corners
Ergebnis: border-radius: 20px 20px 0 0;
Eingabe: All: 50%
Prozess: 50% on all corners creates circle/ellipse
Ergebnis: border-radius: 50%; (Creates circle)
Verwandte Suchen
Leute suchen auch nach: Grenzradiusgenerator, CSS-Rahmenradius, abgerundete Ecken, randradius.
GrenzradiusgeneratorCSS-Rahmenradiusabgerundete Eckenrandradius
Häufig gestellte Fragen
Wie erstelle ich einen perfekten Kreis?
Um einen perfekten Kreis zu erstellen, muss das Element ein Quadrat sein (gleiche Breite und Höhe) und den Randradius auf 50% setzen. Verwenden Sie für einen 200 x 200 Pixel großen Avatar width: 200 pixel; height: 200 Pixel; border-radius: 50%;. Wenn das Element nicht quadratisch ist, erstellt 50% eine Ellipse anstelle eines Kreises. Verwenden Sie für reaktionsschnelle Kreise ohne feste Abmessungen das Seitenverhältnis: 1; mit Breite und Randradius: 50%.
Was ist der maximale Grenzradiuswert?
Es gibt keinen strengen Maximalwert für den Grenzradius in CSS. Werte, die größer als die Hälfte der Elementgröße sind, erzeugen einfach einen vollständigen Rundungseffekt. Bei pillenförmigen Knöpfen ist es üblich, einen sehr großen Wert wie 9999px oder 9999em zu verwenden - dies garantiert vollständig abgerundete Seiten unabhängig von der Höhe des Elements. Die Verwendung von 50% erzeugt elliptische Ecken (halbe Breite, halbe Höhe des Radius), während 9999px mehr kreisförmige Halbkappen erzeugt.
Kann ich den Randradius mit CSS-Übergängen animieren?
Ja, der Grenzradius ist animierbar. Sie können reibungslos zwischen verschiedenen Grenzradiuswerten wechseln: .element { Randradius: 0; Übergang: Randradius 0,3s Leichtigkeit; } .element: schweben {Randradius: 20 Pixel; }. Dies erzeugt sanfte Morphing-Effekte bei Hover- oder Klassenänderungen. Das Animieren zwischen Prozent- und Pixelwerten funktioniert in modernen Browsern, obwohl die Interpolation möglicherweise nicht immer perfekt glatt ist.
Warum funktioniert der Rahmenradius bei meinem Tisch oder Bild nicht?
border-radius erfordert einen Überlauf: ausgeblendet (auf dem übergeordneten Element) oder richtige Anzeigeeigenschaften, um auf bestimmten Elementen sichtbar zu sein. Bei Bildern schneidet der Randradius den Bildinhalt ab. Für Tabellen benötigen Sie möglicherweise border-collapse: separate; damit border-radius an Tabellenzellen arbeitet. Wenn die abgerundeten Ecken nicht sichtbar sind, überprüfen Sie, ob das Element einen Überlauf aufweist: ausgeblendet, der irgendwo angewendet wird, um den Effekt zu beschneiden, oder ob der Randradius von spezifischeren CSS-Selektoren überschrieben wird.
Wie erstelle ich eine Blatt- oder organische Klecksform?
Verwenden Sie für Blattformen asymmetrische Randradiuswerte, bei denen gegenüberliegende Ecken sehr unterschiedliche Radien haben (z. B. Randradius: 0 100px 0 100px für ein horizontales Blatt). Verwenden Sie für organische Blob-Formen die 8-Werte-Ellipsensyntax mit unterschiedlichen horizontalen/vertikalen Radien (z. B. Randradius: 30% 70% 70% 30% / 30% 30% 70% 70%). CSS kann glatte Blob-Formen erstellen - kombiniert mit Animationen für interaktive Blob-Effekte.