Border-Radius-Generator
Border Radius Generator
Formt jede Ecke unabhängig, einschließlich der Zwei-Wert-Squircle-Syntax, und gibt das CSS aus.
Rundet die Ecken einer Box mit allen acht Radiuswerten, und – weil „mach daraus einen Squircle“ als dieselbe Frage ankommt – zeichnet außerdem echte Superellipsen- und `clip-path`-Formen, die `border-radius` nicht kann.
Vorschau
CSS
Ecken
Oben links
Oben rechts
Unten rechts
Unten links
Vorlagen
clip-path
Eine andere Eigenschaft mit einer anderen Aufgabe. border-radius rundet einen Kasten ab; clip-path schneidet eine beliebige Form aus und nimmt den Schatten mit.
So funktioniert es
Ziehen Sie die Eckenregler
Vier Ecken in px oder Prozent. Vorschau und Deklaration aktualisieren sich gemeinsam.
Schalten Sie „auf beiden Achsen gleich“ für die Blob-Formen aus
Das ergibt die Acht-Wert-Form mit Schrägstrich, bei der jede Ecke einen horizontalen und einen vertikalen Radius hat. Jede organische Blob-Form kommt aus dieser Form.
Wechseln Sie zu clip-path, wenn die Form kein Rechteck ist
Kreise, Polygone, eine Sprechblase, ein Chevron – und der Superellipsen-Regler, der die tatsächliche Squircle-Kurve ist und kein runderes Rechteck.
Häufige Fragen
Warum sieht ein Radius von 9999px genauso aus wie 50 %?
Weil die Spezifikation, wenn die Radien einer Seite sich überlappen würden, *alle vier* um denselben Faktor skaliert, bis sie passen. Jeder absurd große Wert fällt also auf dieselbe Form zusammen, und die Seite zeigt Ihnen den Faktor, den sie verwendet hat.
Kann CSS einen echten Squircle zeichnen?
Nicht mit `border-radius` – diese Ecke ist streng elliptisch, ein an einen Radius geschraubter „Squircle-Regler“ ist also nur ein runderes Rechteck. Die Superellipse hier wird als `clip-path`-Polygon gezeichnet, und das ist heute der ehrliche Weg zu dieser Kurve.
Warum ist mein Schatten mit clip-path verschwunden?
Weil `clip-path` das Element beschneidet und der Schatten außerhalb des Elements gezeichnet wird. Es beschneidet auch überlaufende Kinder. `border-radius` tut keines von beidem, und deshalb bleibt es das richtige Werkzeug, wann immer die Form ein abgerundetes Rechteck ist.
Wie runde ich nur die äußeren Ecken einer Gruppe?
Runden Sie den Container und geben Sie ihm `overflow: hidden`, oder verwenden Sie `:first-child`/`:last-child` auf den Elementen. Ein Radius pro Ecke auf der Gruppe selbst erreicht die Kinder nicht, und das ist es, was bei einer Button-Gruppe gewöhnlich schiefgeht.
Eingabe aus
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Fluid-Size-Rechner
Fluid Size Calculator
Berechnet einen clamp()-Ausdruck, der eine Größe zwischen zwei Viewport-Breiten gleichmäßig skaliert.
CSS formatieren und minimieren
CSS Beautifier & Minifier
Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.
Box-Shadow-Generator
Box Shadow Generator
Setzt mehrschichtige Box- und Textschatten mit Live-Vorschau zusammen und gibt das CSS aus.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.