CSS-Border-Radius-Generator

Was ist CSS-Border-Radius-Generator?

Der CSS-Border-Radius-Generator ist ein kostenloser visueller Editor für die CSS-Eigenschaft border-radius, gemacht für Frontend-Entwickler und Designer. Verwende die Schieberegler und Zahlenfelder, um den horizontalen und vertikalen Radius jeder Ecke in Pixeln festzulegen, wähle eine Einheit und aktiviere den elliptischen Modus, um die Schrägstrich-Syntax für ovale Ecken zu erhalten. Eine Live-Vorschau zeigt die abgerundete Form in Echtzeit, und die kompakte verkürzte Deklaration wird zum Kopieren erzeugt. Wähle eine Voreinstellung wie Abgerundet, Pille, Kreis oder ein organisches Blob über die Segmentsteuerung, um schnell zu starten, und feile dann an jeder Ecke. Damit gestaltest du weiche Karten, Pillen-Buttons, perfekte Kreise, Squircles und tropfenförmige Dekoformen, ohne die Eckenreihenfolge auswendig zu lernen.

So verwendest du CSS-Border-Radius-Generator

1. Wähle über die Segmentsteuerung eine Voreinstellung (Abgerundet, Pille, Kreis oder Blob), um eine Ausgangsform zu laden.
2. Ziehe den Schieberegler jeder Ecke oder tippe eine Zahl ein, um den horizontalen Radius dieser Ecke festzulegen.
3. Aktiviere Elliptisch, um pro Ecke einen zweiten vertikalen Radius anzuzeigen und ovale Ecken mit der Schrägstrich-Syntax zu erzeugen.
4. Wähle die Einheit (px oder %) in den Einstellungen; Prozentwerte skalieren den Radius mit der Boxgröße.
5. Beobachte, wie sich die Live-Vorschau aktualisiert, und kopiere das erzeugte Border-Radius-Kurzformat in dein Stylesheet.

Beispiele

Alle vier Ecken 16, elliptisch aus

border-radius: 16px;

Voreinstellung Pille, alle Ecken 9999

border-radius: 9999px;

OL 40/20, OR 10, UR 40/20, UL 10, elliptisch an

border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;

Häufig gestellte Fragen

In welcher Reihenfolge stehen die vier Ecken?

Das Kurzformat listet die Ecken im Uhrzeigersinn beginnend oben links: oben links, oben rechts, unten rechts, unten links. Dieses Tool gibt alle vier Werte stets in dieser Reihenfolge aus, sodass das Ergebnis eindeutig ist und sich danach leicht von Hand anpassen lässt.

Was macht der elliptische Modus?

Border-radius kann pro Ecke einen horizontalen und einen vertikalen Radius annehmen, getrennt durch einen Schrägstrich, um ovale (elliptische) statt kreisförmige Ecken zu zeichnen. Aktiviere Elliptisch, um für jede Ecke einen zweiten vertikalen Radius festzulegen; die Ausgabe nutzt dann die Schrägstrich-Syntax 'horizontal / vertikal'.

Sollte ich px oder Prozent verwenden?

Pixel geben eine feste Eckengröße unabhängig von der Box. Prozentwerte sind relativ zur Breite und Höhe der Box, sodass 50% an jeder Ecke ein Quadrat in einen perfekten Kreis verwandeln und die Rundung mit der Größe des Elements skaliert. Wechsle die Einheit in den Einstellungen.

Wie erstelle ich einen perfekten Kreis oder eine Pille?

Wähle die Voreinstellung Kreis (50% an jeder Ecke) für einen Kreis aus einem Quadrat oder die Voreinstellung Pille (ein sehr großer Pixelradius), damit die kurzen Seiten zu vollen Halbkreisen werden. Du kannst auch von einer Voreinstellung ausgehen und einzelne Ecken feinjustieren.

Werden meine Daten irgendwohin hochgeladen?

Nein. Der Generator läuft vollständig in deinem Browser mit JavaScript – deine Radiuswerte werden nie an einen Server gesendet, sodass er privat und nach dem Laden der Seite sogar offline funktioniert.