CSS Rahmen Radius Generator

Einstellungen

Vorschau

CSS-Ausgabe

 
   
 
 
  
 
 
 
So nutzen Sie das Tool
 
     
  1. Ecken koppeln oder trennen — "Alle Ecken" für einen Regler, oder einzeln einstellen.
    2.  
  2. Werte setzen — Schieberegler oder Eingabe für jede Ecke.
    3.  
  3. Einheit wählen — px für feste UI, % für skalierbare Formen, rem relativ zur Schriftgröße.
    4.  
  4. Kopieren — Kurzschreibweise oder Longhand direkt ins Stylesheet.
    5.  
 
 
 
Was ist CSS Border-Radius?
 
border-radius rundet Ecken der Border-Box. Ein Wert gilt für alle; bis zu vier Werte für einzelne Ecken (oben links, oben rechts, unten rechts, unten links).
 
Prozentwerte beziehen sich auf die Elementgröße — 50% auf einem Quadrat ergibt einen Kreis. In allen modernen Browsern unterstützt.
 
 
 
Typische Einsatzszenarien
 
 
Abgerundete Karten
 
Runde Avatare
 
Pill-Buttons
 
Asymmetrische Ecken
 
Foto-Zuschnitt
 
Sprechblasen
 
 
Tipps & Best Practices
 
 
 Reihenfolge merken 
Oben links, oben rechts, unten rechts, unten links — im Uhrzeigersinn.
 
 
 Perfekter Kreis 
Gleiche Breite und Höhe + border-radius: 50%. Fertig.
 
 
 Pillenform-Trick 
9999px erzeugt Pillenenden ohne Halb-Höhen-Berechnung.
 
 
 Verschachtelte Karten 
Innere Karten wirken mit etwas kleinerem Radius als die äußere harmonischer.
 
 
 
Häufig gestellte Fragen
 
 
Reihenfolge bei border-radius?
 
Vier Werte: oben links, oben rechts, unten rechts, unten links. Zwei Werte: Diagonalpaare. Ein Wert: alle gleich.
 
 
 
px, % oder rem — wann was?
 
px für feste Komponenten. % für skalierbare Rundung. rem, wenn sie der Root-Schriftgröße folgen soll.
 
 
 
Warum bleibt mein Bild eckig?
 
Radius auf img oder Wrapper mit overflow: hidden setzen. Nur am Parent reicht oft nicht.
 
 
 
Elliptische Ecken möglich?
 
Ja, per Slash-Syntax: border-radius: 40px / 20px für verschiedene horizontale und vertikale Radien.
 
 
 
Funktioniert border-radius überall?
 
Ja, inklusive Mobile Safari. Bei gemischten Einheiten Longhand verwenden.