Generator für abgerundete Ecken und Formen
Passe die horizontalen und vertikalen Radien der vier Ecken in px oder % an und sieh dir die Form in der Vorschau an. Du kannst das erzeugte border-radius-CSS kopieren oder speichern. Breite, Höhe und Farbe der Vorschau sind nicht im CSS enthalten.
Möglichkeiten
Abrundung anhand einer Vorlage anpassen
Wählen Sie aus 8 Vorlagen, darunter abgerundete Ecken, Kapsel und Blatt, und passen Sie die Radien an. Beim Auswählen einer Vorlage werden Radien und Einheit ersetzt.
Alle vier Ecken unterschiedlich abrunden
Deaktivieren Sie die Einstellung für gleiche Radien, um horizontale und vertikale Radien für die Ecken oben links, oben rechts, unten rechts und unten links einzeln einzugeben.
CSS prüfen und abrufen
Erstellen Sie CSS, nachdem Sie die Form geprüft haben. Wechseln Sie zwischen Kurzschreibweise und einzelnen Eckdeklarationen und kopieren oder speichern Sie das CSS anschließend als Datei.
Anleitung
Vorlage und Einheit auswählen
Geben Sie Radien direkt ein oder wählen Sie eine Vorlage als Ausgangspunkt. Beim Einheitenwechsel werden die Zahlen nicht umgerechnet.
Abrundung und Form vergleichen
Geben Sie einen Wert ein, um überall denselben Radius zu verwenden. Für unterschiedliche Ecken deaktivieren Sie die Option und passen horizontale und vertikale Werte an.
Bei Bedarf Größe prüfen
In den Vorschau-Einstellungen können Sie Breite, Höhe und Vorschaufarbe ändern. Diese werden nicht in das Ausgabe-CSS übernommen.
CSS erstellen und anschließend kopieren oder speichern
Klicken Sie auf „CSS erstellen“ und wählen Sie das gewünschte Format. Wenn Sie Radien, Einheit oder Größe ändern, erstellen Sie es erneut.
Nützlich, wenn
Ecken von Karten und Schaltflächen gestalten
Wenn Sie CSS für Seitenkomponenten erstellen möchten, bei dem alle vier oder nur die oberen Ecken gleichmäßig abgerundet werden.
Asymmetrischen abgerundeten Hintergrund erstellen
Wenn Sie horizontale und vertikale Abrundung je Ecke ändern möchten, um blattähnliche oder organische Umrisse zu gestalten.
Zusammenhang zwischen Radien, Einheiten und Anzeigegröße
Horizontal und vertikal sind zwei Richtungen derselben Ecke
Der horizontale Radius steuert die horizontale, der vertikale Radius die vertikale Abrundung. Ist einer der Werte 0, wird die Ecke nicht abgerundet. Geben Sie die vier Ecken im Uhrzeigersinn beginnend oben links an.
% verwendet Breite und Höhe als getrennte Bezugsgrößen
Horizontale %-Werte beziehen sich auf die Elementbreite, vertikale auf die Elementhöhe. Selbst bei gleichen Zahlenwerten sehen ein Quadrat und ein hohes oder breites Rechteck unterschiedlich aus. px gibt eine Länge direkt an.
Zu große Radien werden proportional verkleinert
Wenn die Summe benachbarter Radien die Seitenlänge überschreitet, werden alle 8 Anzeigeradien mit demselben Faktor reduziert. Eingabewerte und erzeugtes CSS bleiben unverändert. In den Details nach der Erstellung können Sie die für die Vorschau verwendeten Radien prüfen.
Welche Umrisse sich mit abgerundeten Ecken darstellen lassen
border-radius formt Ecken zu elliptischen Kurven. Einbuchtungen oder beliebige Vielecke lassen sich damit nicht erstellen. Die Squircle-Vorlage nähert die Form mit elliptischen Ecken an, bildet die mathematische Kurve jedoch nicht exakt ab.
Häufig gestellte Fragen
Kann ich jede Ecke unterschiedlich abrunden?
Ja. Deaktivieren Sie „Gleicher Radius für alle Ecken“, um die horizontalen und vertikalen Radien jeder Ecke einzeln einzugeben. Wenn Sie die Option erneut aktivieren, werden alle Radien auf den horizontalen Radius oben links gesetzt.
Werden die Zahlen beim Einheitenwechsel umgerechnet?
Nein. Die Zahlen bleiben erhalten; nur die Einheit ändert sich. Wenn nach dem Wechsel von px zu % ein Wert über 100 liegt, geben Sie ihn erneut im Bereich 0–100 ein.
Sind Größe und Farbe der Vorschau im CSS enthalten?
Nein. Die Ausgabe enthält nur border-radius-Deklarationen. Legen Sie Breite, Höhe und Hintergrundfarbe auf der Seite oder Komponente fest, auf der Sie den Code verwenden.
Warum sind die abgerundeten Ecken in der Vorschau kleiner als die eingegebenen Radien?
Der Browser verkleinert die angezeigten Radien proportional, damit sich die Eckkurven nicht überlappen. Unter „Für die Anzeige verwendete Radien“ können Sie den Reduktionsfaktor und die px-Werte jeder Ecke prüfen.
Eingaben und Ergebnisse
- Radien
- Geben Sie alle 8 Werte in derselben Einheit an: 0–100 % oder 0–9999px. Dezimalwerte sind ebenfalls zulässig.
- Vorschau
- Breite und Höhe der Vorschau sind ganze Zahlen von 1–400px. Eine nicht passende Breite kann innerhalb des Felds horizontal gescrollt werden.
- Ausgabe
- border-radius-Kurzschreibweise oder Deklarationen für alle 4 Ecken. Kopieren oder speichern Sie border-radius.css.
- Nicht enthalten
- Breite, Höhe, Hintergrundfarbe sowie Bild- oder SVG-Exporte.