CSS-Border-Radius-Generator

In drei Schritten zur Form

1. Stelle Breite und Höhe zwischen 1 und 2000 CSS-Pixeln ein. Gib die horizontalen und vertikalen Radien jeder Ecke in px oder % ein oder übertrage das obere linke Paar auf alle Ecken.
2. Prüfe die eingepasste Vorschau. Horizontale Prozentwerte beziehen sich auf die Breite, vertikale auf die Höhe. Ein Einheitenwechsel erhält die Zahl, ändert aber ihre Bedeutung.
3. Wähle Nur Radius oder Box-CSS und kopiere das vollständige Ergebnis. Falls Kopieren nicht verfügbar ist, markiere den schreibgeschützten Text. Ungültige Felder entfernen das aktuelle Ergebnis.

Die zwei Radien jeder Ecke

Jede Ecke hat einen horizontalen und einen vertikalen Radius. Der Schrägstrich in border-radius trennt vier horizontale von vier vertikalen Werten, jeweils in der Reihenfolge oben links, oben rechts, unten rechts, unten links.

Horizontale Prozentwerte verwenden die Breite, vertikale die Höhe. Bei einem Rechteck ergeben 50 % in beiden Richtungen eine Ellipse, nicht unbedingt einen Kreis. Eine Nullkomponente macht die Ecke eckig.

Überlappen benachbarte Radien an einer Kante, verkleinert der Browser alle acht Komponenten mit einem gemeinsamen Faktor. Aufgelöste und verwendete Pixel beschreiben diese Box; ihre gerundeten Werte ersetzen nicht das eingegebene CSS.

Die Vorschau legt die Box zunächst in ihren angegebenen Maßen an und passt sie danach optisch ein. Nur der Radius kann auf einer anders großen Box anders wirken. Box-CSS ergänzt Maße, border-box sowie null Rand und Innenabstand, jedoch keine Vorschaufarben.

Beispiele mit gemischten Einheiten

Bei einer Box von 240 mal 120 ergeben die horizontalen Werte 75 %, 120 px, 20 %, 30 px und die vertikalen Werte 40 px, 60 %, 60 px, 50 % den gemeinsamen Faktor 0,8. Die oberen Radien werden 144 und 96 px groß; die übrigen Komponenten werden ebenfalls verkleinert.

Bei gleichen Werten und einer Box von 120 mal 240 beträgt der begrenzende Faktor 4/7. Die Form ändert sich, ohne Prozentwerte in feste Pixel umzuwandeln.

Bei einer Box von 240 mal 120 entsprechen 50 % in beiden Richtungen 120 und 60 px. Alle Radien auf null ergeben eckige Ecken.

Umfang und Einordnung

Der Editor erlaubt nicht negative Radien bis 4000 px oder 1000 % mit höchstens drei Nachkommastellen. Er verarbeitet kein beliebiges CSS, calc(), var(), logische Ecken oder andere Einheiten.

Verwende einen Dezimalpunkt oder ein Komma ohne Tausendertrennzeichen. Beim Einheitenwechsel bleibt die Zahl, nicht die aufgelöste Länge erhalten. Leere, unvollständige oder ungültige Felder entfernen Vorschau und Kopie.

Verwendete Pixel und Faktor sind gerundete Erläuterungen für diese Box. Die Darstellung kann Subpixel runden; das kopierte CSS behält die eingegebenen Werte und Einheiten.

Das Einpassen ändert nur die Anzeige, nicht die logische Box oder die exportierte Regel. Auf einer anderen Box berechnet der Browser Prozentwerte und Reduktion neu.

Der Radius formt Hintergrund oder Rand, schneidet aber Kindinhalte nicht grundsätzlich ab. Das Werkzeug bietet keinen Bildupload, kein Ziehen, keine Animation und keine overflow-Regel.

Lokale Gestaltung ohne gespeicherte Entwürfe

Das Werkzeug fügt keinen Upload, Verlauf oder Link und keine Anfrage mit deinen Einstellungen hinzu. Kopieren erfolgt ausdrücklich. Bestehende Website-Dienste, Erweiterungen und eigene Kopien sind nicht von einem allgemeinen Löschversprechen erfasst.