Zum Inhalt springen
Toolars
Erkunden
Fehler melden

Design · Lokal-Werkzeug

CSS-border-radius-Generator

CSS Border Radius Generator

Forme border-radius-Werte für jede Ecke einzeln, in px oder Prozent — mit Vorschau für Kreise, Ellipsen und Blattformen, Code zum Kopieren.

Aufgabenpfad / von der Eingabe zum Ergebnis

Wähle die Einheit

Läuft lokal · Nichts wird hochgeladen

Wie CSS-border-radius-Generator funktioniert, Datenschutz und verwandte Tools

Aufgabenpfad / von der Eingabe zum Ergebnis

So formst du einen CSS-Eckenradius

  1. 01

    Wähle die Einheit

    Setze Einheit auf Pixel oder Prozent — der Arbeitsbereich startet in Pixel. Pixel bleiben bei jeder Elementgröße konstant; Prozentwerte skalieren mit dem Element, was organische, asymmetrische Formen erst möglich macht.

  2. 02

    Passe die vier Ecken an

    Bewege Oben links, Oben rechts, Unten rechts und Unten links — jeweils von 0 bis 100 in der gewählten Einheit, in Schritten von 1. Alle vier starten bei 24 px, und die Vorschaukarte zeichnet sich bei jeder Änderung neu.

  3. 03

    Verknüpfe die Ecken oder löse sie

    Lass Alle Ecken verknüpfen aktiviert, um jede Ecke gleichzeitig zu ändern, oder schalte es aus, um jede Ecke unabhängig zu formen. Der Arbeitsbereich sagt es neben dem Schalter: Solange verknüpft, aktualisiert das Ändern einer Ecke alle vier.

  4. 04

    Probiere die Beispielform

    Drücke Beispiel laden für eine asymmetrische Referenz: Oben links und Unten rechts bei 64 px, Oben rechts und Unten links bei 12 px, unverknüpft — die diagonale Blattform, die auf Karten und Avataren verwendet wird. Zurücksetzen kehrt zum einheitlichen 24-px-Standard zurück.

  5. 05

    Prüfe die generierte Deklaration

    Die Ausgabe listet immer vier Werte im Uhrzeigersinn — oben links, oben rechts, unten rechts, unten links —, sodass jede Ecke beim Einfügen explizit bleibt. Das Statusbadge zeigt GÜLTIGES CSS, und jede Ecke außerhalb des Bereichs schaltet es auf WERTE PRÜFEN und blockiert das Kopieren.

  6. 06

    Kopiere oder lade das CSS herunter

    Drücke CSS kopieren, um die .rounded-card-Regel als Vier-Werte-border-radius-Deklaration zu kopieren, oder .css herunterladen, um sie als toolars-border-radius.css zu speichern. Dieselbe Deklaration funktioniert auf Bildern, Buttons, Karten und jedem anderen Element.

Tool-Fakten

Verarbeitung
In deinem Browser
Eingabe verlässt dieses Gerät
Nie
Aufbewahrung
Nichts wird gespeichert
Preis
Kostenlos

Deine Eingabe bleibt im Browser.

CSS-border-radius-Generator nutzt seinen verifizierten lokalen Ausführungspfad und erstellt keinen versteckten Ein- oder Ausgabeverlauf.

Lokale Ausführung

Läuft im aktuellen Browser-Tab.

Keine versteckte Verarbeitung

Aktive Tool-Daten werden nie zu einem Toolars-Dokumentdatensatz.

Kein Konto erforderlich

Nutze den Kern-Workflow ohne Profil. Favoriten werden mit deinem Konto synchronisiert, sobald du dich anmeldest.

Sofortiges Zurücksetzen

Leere den Tab, und die aktiven Arbeitsdaten sind weg.

Was CSS-border-radius-Generator tatsächlich tut

Abgerundete Ecken bestimmen den Ton eines Interfaces: 8 px für ein ruhiges Formular, 24 px für eine freundliche Karte, wild asymmetrische Werte für den organischen Blob hinter einer Hero-Sektion. Vier Zahlen in einem Stylesheet zu raten ist langsam, besonders in Prozent, wo die Kurve von den Proportionen des Elements abhängt. Der CSS-Eckenradius-Generator zeigt die exakte Form, während du ziehst, mit verknüpften Ecken für einheitliche Rundung oder gelösten für Blatt- und Blob-Formen. Dann übergibt er dir die Deklaration — lokal gerendert und validiert.

Häufige Fragen

Was ist der Unterschied zwischen Pixel und Prozent?
Pixel geben jeder Ecke unabhängig von der Elementgröße einen festen Radius. Prozent rechnet gegen die Maße des Elements, derselbe Wert erzeugt also auf einer hohen Karte eine andere Kurve als auf einer breiten — genau diese Relativität ermöglicht Ellipsen- und Blob-Formen.
Was macht Alle Ecken verknüpfen?
Solange verknüpft, aktualisiert das Ändern einer beliebigen Ecke alle vier auf denselben Wert, was einheitliche Rundung schnell hält. Schalte den Schalter aus, um Oben links, Oben rechts, Unten rechts und Unten links unabhängig zu steuern — die asymmetrische Beispielvorgabe ist so gebaut.
Wie bekomme ich einen perfekten Kreis oder eine Ellipse?
Stelle Einheit auf Prozent und setze alle vier Ecken auf 50: Auf einem quadratischen Element ist das Ergebnis ein perfekter Kreis, auf einem rechteckigen eine Ellipse. Das ist die Standardtechnik für Avatare und Pillen, und die Vorschau zeigt sie, bevor du etwas kopierst.
Warum listet die Ausgabe immer vier Werte?
CSS ließe identische Werte zur Kurzschreibweise kollabieren, aber der Generator schreibt alle vier Ecken im Uhrzeigersinn, damit die Deklaration die vier Regler exakt spiegelt. Was du abgestimmt hast, ist das, was du einfügst, ohne Mehrdeutigkeit, welche Ecke jede Zahl formt.
Was sind die Grenzen?
Jede Ecke akzeptiert 0 bis 100 in der gewählten Einheit, in Schritten von 1. Werte außerhalb des Bereichs werden mit WERTE PRÜFEN markiert, und Kopieren oder Herunterladen ist blockiert, bis sie korrigiert sind.
Wird irgendetwas hochgeladen oder gespeichert?
Nein. Die Vorschau und das generierte CSS werden in diesem Browser-Tab berechnet, und kein generierter Wert landet in Speicher, Logs, Analytics oder dem Netzwerk.

Weiter in Design

Verwandte Aufgaben statt Sackgasse.

Wechsle in einen anderen fokussierten Arbeitsbereich, ohne zum vollständigen Index zurückzukehren.

Generator für CSS-Ladeanimationen

CSS Loader Generator

Gestalte Ladeindikatoren als Ring oder Punkte mit 24 bis 160 px Rahmen und 0,2 bis 4 Sekunden Zyklus — mit Live-Vorschau und Code zum Kopieren.

Erstellen

CSS-Checkbox-Generator

CSS Checkbox Generator

Style eigene Checkboxen auf Basis eines nativen input-Elements — mit Fokus-Umriss, Disabled-Zustand und Reduced-Motion-Variante im kopierfertigen CSS.

Erstellen

CSS-Switch-Generator

CSS Switch Generator

Entwirf Umschalter aus reinem CSS mit frei bemessener Schiene und Regler, 180-ms-Transition und Reduced-Motion-Fallback — Code zum Kopieren.

Erstellen

CSS-clip-path-Generator

CSS Clip Path Generator

Bearbeite Polygonpunkte per Ziehen, Tastatur oder Koordinaten. Vier Vorlagen und lokaler Export als clip-path-Deklaration oder vollständiges CSS.

Erstellen