Zum Inhalt springen
SPCX Tools

Border Radius

Gestalte abgerundete CSS-Ecken und Formen visuell und kopiere den Code mit einem Klick.

Läuft lokal – Dateien verlassen dein Gerät nicht

Tool wird geladen…

So nutzt du: Border Radius

  1. 1Wähle deine bevorzugte Einheit ("px" für feste Kurven oder "%" für responsive Formen).
  2. 2Nutze die Checkbox "Ecken verknüpfen", um alle Ecken gleichzeitig anzupassen, oder deaktiviere sie, um individuelle Werte für jede Ecke festzulegen.
  3. 3Ziehe die Schieberegler, um den Border Radius anzupassen, und beobachte, wie sich die Vorschau in Echtzeit aktualisiert.
  4. 4Alternativ kannst du auf eine der Vorlagen-Schaltflächen klicken, um sofort gängige Formen wie Pillen, Kreise, Tabs oder Blätter zu erstellen.
  5. 5Kopiere den generierten CSS-Code unten, um ihn in deinem Stylesheet zu verwenden.

Ein visueller Border-Radius-Generator

Für perfekte abgerundete Ecken deiner Webkomponenten solltest du keine Zahlen raten und ständig den Browser aktualisieren müssen. Mit diesem visuellen Border-Radius-Generator kannst du Schieberegler anpassen und sofort sehen, wie sich die Rundungen auf ein Element auswirken. Sobald du den gewünschten Look erreicht hast, kannst du das optimierte CSS-Snippet direkt in die Zwischenablage kopieren.

Da alle Berechnungen und Vorschauen lokal in deinem Browser stattfinden, ist das Tool unglaublich schnell und absolut privat. Nichts von dem, was du gestaltest oder anklickst, wird jemals auf einen Server hochgeladen.

Abgerundete CSS-Ecken meistern

Die Eigenschaft border-radius ist ein grundlegender Bestandteil modernen Webdesigns. Sie wird verwendet, um harte Kanten von Buttons, Bildern, Modals und Layout-Containern abzurunden. Auch wenn sie auf den ersten Blick einfach erscheint, kann die Syntax überraschend komplex sein, wenn man bestimmte Ecken gezielt anpassen möchte.

Dieser CSS Border-Radius Generator hilft dir dabei, die CSS-Kurzschreibweise (Shorthand) zu verstehen und effektiv zu nutzen. Wenn du alle Ecken miteinander verknüpfst, gibt das Tool einen einzigen Wert aus (z. B. border-radius: 16px;). Wenn du die Ecken entkoppelst, um eine individuelle Form zu erstellen, formatiert der Generator das CSS automatisch basierend auf deinen Eingaben:

  • Vier Werte: Wenn alle Ecken unterschiedlich sind, wendet CSS sie im Uhrzeigersinn an, beginnend oben links (z. B. border-radius: 16px 8px 4px 2px;).
  • Zwei Werte: Wenn oben links mit unten rechts und oben rechts mit unten links übereinstimmt, fasst das Tool den Code intelligent in zwei Werten zusammen (z. B. border-radius: 16px 0;).

Pixel vs. Prozent

Eine der häufigsten Herausforderungen beim Schreiben von CSS für abgerundete Ecken ist die Wahl der richtigen Einheit. Mit diesem Tool kannst du ganz einfach zwischen Pixeln (px) und Prozent (%) wechseln, die im UI-Design jeweils einen eigenen Zweck erfüllen.

Pixel (px) sind absolute Einheiten. Ein Border-Radius von 12px sieht immer genau gleich aus, egal ob er auf einen winzigen Button oder ein riesiges Hero-Image angewendet wird. Pixel sind die Standardwahl für UI-Komponenten wie Cards, Dropdown-Menüs und Eingabefelder, da sie für eine konsistente und einheitliche Designsprache in der gesamten Anwendung sorgen. Dieses Tool erlaubt Pixelwerte bis zu 200px.

Prozentwerte (%) sind relativ zur Größe des Elements selbst. Ein Border-Radius von 50% bei einem quadratischen Element erzeugt immer einen perfekten Kreis, unabhängig davon, ob das Quadrat 50 oder 500 Pixel breit ist. Bei einem rechteckigen Element erzeugen 50% ein elliptisches Oval. Prozentwerte sind ideal für responsive Elemente wie Profil-Avatare oder dekorative Hintergrund-Blobs. Dieses Tool begrenzt Prozentwerte auf 50%, da höhere Werte den visuellen Rundungseffekt in CSS nicht weiter verstärken.

Mehr als nur abgerundete Ecken: Ein CSS Shape Generator

Obwohl border-radius meist für dezente Abrundungen genutzt wird, ist es auch ein mächtiger CSS Shape Generator. Durch individuelle Ecken-Werte und extreme Kombinationen lassen sich einzigartige geometrische Formen erstellen – ganz ohne SVG-Dateien oder komplexe Clip-Paths. Das Tool bietet mehrere Presets, um dies zu demonstrieren:

  • Pillenform: Weist man allen Ecken einen künstlich hohen Pixelwert (wie 9999px) zu, entsteht eine "Pillen"- oder Stadionform. Diese wird häufig für Badges, Tags und moderne Call-to-Action-Buttons verwendet. Der Browser begrenzt die tatsächliche Rundung auf exakt die halbe Höhe des Elements und sorgt so für perfekte Halbkreise an den Rändern.
  • Kreis: Setzt man alle Ecken auf 50%, verwandelt sich ein Quadrat in einen perfekten Kreis.
  • Blatt: Setzt man die Ecken oben links und unten rechts auf 0 und die Ecken oben rechts und unten links auf einen hohen Wert (wie 48px), entsteht eine asymmetrische, organische Blattform.
  • Tab: Rundet man nur die Ecken oben links und oben rechts ab (z. B. 16px), während die unteren Ecken bei 0 bleiben, entsteht eine klassische Tab-Form (Reiter), die sich perfekt für Navigationsmenüs eignet.

Perfektioniere deine UI-Komponenten

Abgerundete Ecken stehen selten für sich allein; sie sind meist Teil eines größeren, stimmigen Design-Systems. Eine gut gestaltete Card-Komponente kombiniert beispielsweise einen dezenten Border-Radius mit Tiefe und Farbe, um sich auf der Seite abzuheben.

Sobald du deinen idealen Border-Radius generiert hast, kannst du ihn mit anderen CSS-Effekten kombinieren, um dein Design zu vervollständigen. Kombiniere deine neue Form mit einem weichen Schlagschatten mithilfe unseres Box Shadow Generator, um einen erhabenen, schwebenden Effekt zu erzeugen. Wenn du einen Button oder ein dekoratives Hintergrundelement gestaltest, kannst du mit dem CSS Gradient Generator einen lebendigen Hintergrund anwenden oder mit dem Color Palette Generator die perfekten Komplementärfarben finden.

Häufige Fragen

Was ist die CSS-Eigenschaft border-radius?
Die CSS-Eigenschaft border-radius rundet die Ecken des äußeren Rahmens eines Elements ab. Du kannst einen einzigen Radius festlegen, um einen Kreis oder ein abgerundetes Rechteck zu erstellen, oder für jede Ecke unterschiedliche Radien angeben, um komplexe Formen zu erzeugen.
Sollte ich Pixel (px) oder Prozent (%) verwenden?
Verwende Pixel (px), wenn du eine feste, gleichbleibende Rundung unabhängig von der Elementgröße möchtest, wie z. B. bei einer Standardkarte mit 8px. Verwende Prozent (%), wenn die Rundung mit dem Element skalieren soll, z. B. 50% für einen perfekten Kreis oder ein Oval.
Wie erstelle ich einen perfekten Kreis in CSS?
Für einen perfekten Kreis muss dein HTML-Element die gleiche Breite und Höhe haben (also quadratisch sein) und der border-radius muss auf 50% gesetzt werden. Du kannst die Vorlage „Kreis“ in diesem Tool verwenden, um den genauen Code zu generieren.
Wie erstelle ich eine Pillenform?
Eine Pillenform erstellst du, indem du einen sehr hohen Pixelwert für den border-radius festlegst, wie z. B. 9999px. Dadurch werden die linken und rechten (oder oberen und unteren) Kanten zu perfekten Halbkreisen, unabhängig von der Breite des Elements.
Warum hat das generierte CSS manchmal weniger als vier Werte?
CSS nutzt eine Kurzschreibweise für border-radius. Sind alle vier Ecken gleich, wird nur ein Wert ausgegeben (z. B. 16px). Stimmen oben-links/unten-rechts sowie oben-rechts/unten-links überein, sind es zwei Werte. So bleibt dein CSS sauber und kompakt.
Werden meine Designdaten irgendwo gespeichert?
Nein, dieser Border-Radius-Generator läuft vollständig im Browser. Es werden keine Daten an Server gesendet oder dort gespeichert, was eine schnelle und private Nutzung gewährleistet.

Ähnliche Tools

Box Shadow GeneratorPasse weiche, harte, mehrschichtige oder Inset-Schatten mit einer Live-Vorschau an und kopiere den CSS-Code.CSS Gradient GeneratorGestalte visuell einen Hintergrund-Farbverlauf und kopiere das CSS — linear, radial oder konisch.Farbpaletten-GeneratorWähle eine Farbe und erhalte eine harmonische Fünf-Farben-Palette basierend auf der Farbtheorie.Farbenblindheit-SimulatorBetrachte deine Bilder durch die Augen von Menschen mit Farbfehlsichtigkeit, um sicherzustellen, dass deine Designs barrierefrei sind.Farbkontrast-CheckerPrüfe, ob dein Text ausreichend lesbar ist — und finde die ähnlichste Farbe, die den WCAG-Richtlinien entspricht.FarbkonverterJede Farbe zwischen HEX, RGB, HSL, HSV und CMYK umrechnen und den Kontrast prüfen.