border-radius: 20px;
Ecken abrunden leicht gemacht
Abgerundete Ecken sind aus dem modernen Webdesign nicht wegzudenken. Mit diesem Generator passt du jede Ecke einzeln an – von leicht abgerundet bis zu komplexen organischen Formen.
Border-Radius verstehen
Der border-radius kann für alle Ecken gleich (ein Wert) oder für jede Ecke einzeln (vier Werte) definiert werden. Für elliptische Ecken gibt es den / Operator.
Typische Werte
4-8px: Dezent abgerundet für Buttons und Inputs. 12-16px: Standard für Karten und Container. 50%: Perfekte Kreise bei quadratischen Elementen. 9999px: Pill-Shape für Buttons.
Organische Formen
Mit unterschiedlichen Werten für jede Ecke und dem / Operator für elliptische Radien kannst du organische, blob-artige Formen erstellen.
Fragen & Antworten Häufig gestellte Fragen.
Wie mache ich einen perfekten Kreis mit CSS?
Setze border-radius: 50% bei einem Element mit gleicher Breite und Höhe. Z.B.: width: 100px; height: 100px; border-radius: 50%;
Was bedeutet border-radius: 10px 20px 30px 40px?
Die Werte gehen im Uhrzeigersinn: oben-links, oben-rechts, unten-rechts, unten-links. Also 10px oben-links, 20px oben-rechts, usw.
Wie erstelle ich einen Pill-Button?
Setze border-radius auf einen sehr hohen Wert wie 9999px oder 999em. Das erzeugt die typische Pillenform unabhängig von der Größe.
Funktioniert border-radius bei allen Elementen?
Ja, border-radius funktioniert bei allen Block- und Inline-Block-Elementen, auch bei Bildern, Buttons, Inputs und Containern.
Ähnliche Tools
- CSS Box Shadow GeneratorBox-Shadows per Slider anpassen: Offset, Blur, Spread, Farbe, Inset. Mit Echtzeit-Vorschau. ✓ CSS-Code kopieren ✓ Kostenlos.
- CSS Gradient GeneratorCSS-Farbverläufe per Drag & Drop: Linear, radial, beliebig viele Farben. CSS-Code sofort kopieren. ✓ Kostenlos ✓ Live-Vorschau.
- CSS MinifierCSS-Code minifizieren: Whitespace, Kommentare und überflüssige Zeichen entfernen. Größenersparnis sofort sehen. ✓ Kostenlos ✓ Ohne Upload.
Weiterlesen im Blog
Vom Werkzeug zum Projekt Lieber machen lassen?
Pixel-perfektes Webdesign ist mein Anspruch. Ich entwickle individuelle Websites mit Liebe zum Detail. Webdesign ansehen
Ohne Risiko anfragen
- Unverbindlich. Erstgespräch und Angebot kosten nichts.
- Persönlich. Sie sprechen direkt mit mir, nicht mit einem Vertrieb.
- Klar. Schriftliches Angebot mit Preis und Ablauf, bevor etwas startet.
Ihr Richtwert
ab 1.500 €
Wählen Sie unten, was Sie brauchen — der Richtwert passt sich sofort an.
