CSS-Border-Radius-Generator — Visuelle Abgerundete Ecken
Generieren Sie CSS-border-radius visuell. Steuern Sie jede Ecke unabhängig, wechseln Sie px oder %, sehen Sie eine Live-Vorschau und kopieren Sie den Code. 100% in Ihrem Browser.
CSS-Border-Radius-Generator — Gestalten Sie Abgerundete Ecken Visuell
Erstellen Sie den perfekten border-radius mit einem visuellen Editor. Passen Sie jede Ecke unabhängig an oder verknüpfen Sie sie alle, wechseln Sie zwischen Pixeln und Prozenten, beobachten Sie die Live-Vorschau und kopieren Sie das einsatzbereite CSS. Kein Trial-and-Error mehr.
Funktionen
- Unabhängige Ecken: stellen Sie oben-links, oben-rechts, unten-rechts und unten-links separat ein
- Verknüpfungsmodus: ändern Sie alle vier Ecken gleichzeitig mit einem einzigen Schieberegler
- px oder %: wechseln Sie die Einheit — Prozente erzeugen sanfte elliptische Kurven
- Live-Vorschau: sehen Sie die Form sofort auf einem Beispielelement aktualisiert
- Sauberer CSS-Output: kopieren Sie eine einzelne einfügefertige Eigenschaft
border-radius verstehen
Die Kurzschreibweise border-radius nimmt bis zu vier Werte, im Uhrzeigersinn angewendet, beginnend bei der oberen-linken Ecke: oben-links oben-rechts unten-rechts unten-links. Ein Wert von 0 bedeutet eine scharfe Ecke; höhere Werte erzeugen rundere Ecken.
px vs. % — was ist der Unterschied?
- Pixel (px): ein fester Radius unabhängig von der Elementgröße — vorhersehbar und konsistent
- Prozent (%): relativ zu den Abmessungen des Elements. Alle Ecken auf 50% bei einem Quadrat machen es zu einem perfekten Kreis
Häufige Formen
- Abgerundete Karte: 8–16px an allen Ecken
- Pille / Schaltfläche: ein großer px-Wert wie 999px
- Kreis: 50% an allen Ecken (bei einem quadratischen Element)
- Sprechblase: runden Sie drei Ecken ab, lassen Sie eine scharf
Datenschutz
Dieses Tool läuft vollständig in Ihrem Browser. Nichts wird hochgeladen oder gespeichert.