Border-Radius-Generator
Der Border-Radius-Generator erzeugt abgerundete Ecken per CSS: jede Ecke einzeln, gekoppelt oder elliptisch, mit Vorschau und dem kürzesten border-radius-Code.
Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.
border-radius verstehen
Der Border-Radius-Generator rundet die Ecken eines Elements ab und zeigt das Ergebnis sofort an. Sie stellen jede Ecke einzeln ein oder koppeln alle vier, wählen zwischen px, % und rem und kopieren den kürzesten passenden CSS-Code. Die Eigenschaft border-radius nimmt bis zu vier Werte in der Reihenfolge oben links, oben rechts, unten rechts, unten links; sind Werte gleich, fasst der Generator sie zusammen, so wie Sie es auch bei margin kennen.
Abgerundete Ecken können auch elliptisch sein: Nach einem Schrägstrich folgen die vertikalen Radien, etwa border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%. So entstehen Ei-Formen, Tropfen und organische Blob-Formen, die für Hintergründe oder Bildausschnitte beliebt sind. Ein Kreis entsteht mit 50% bei quadratischen Elementen, eine Pille mit einem sehr großen Wert wie 9999px, weil der Browser zu große Radien proportional verkleinert.
Beim CSS Ecken abrunden mit Prozent bezieht sich der horizontale Radius auf die Breite und der vertikale auf die Höhe des Elements; bei Rechtecken ergibt 50% deshalb eine Ellipse. Inhalte wie Bilder schneiden Sie mit overflow: hidden am Rahmen ab. Für Schatten zu den runden Ecken passt der Box-Shadow-Generator.
Anleitung: Border-Radius-Generator in 4 Schritten
- Unter „Vorlage“ eine Form wie Pille, Kreis, Tropfen oder Blob wählen oder mit eigenen Werten beginnen.
- Die Einheit px, % oder rem festlegen und „Alle Ecken gleich“ an- oder ausschalten.
- Die Werte für oben links, oben rechts, unten links und unten rechts einstellen; mit „Elliptische Ecken“ kommen die vertikalen Radien dazu.
- Die Vorschau über „Breite der Vorschau (px)“ anpassen und den CSS-Code kopieren.
Typische Anwendungsfälle
- Karten und Buttons: Einheitliche abgerundete Ecken für ein Designsystem festlegen und den kürzesten Code übernehmen.
- Runde Profilbilder: Mit 50 % aus einem quadratischen Bild einen Kreis machen.
- Reiter und Tabs: Nur die oberen Ecken abrunden, damit Reiter bündig an einen Inhaltsbereich anschließen.
- Dekorative Formen: Organische Blob- oder Tropfenformen für Hintergründe und Bildausschnitte erzeugen.
Häufige Fragen
In welcher Reihenfolge stehen die Werte von border-radius?
Oben links, oben rechts, unten rechts, unten links, also im Uhrzeigersinn ab der linken oberen Ecke. Bei zwei Werten gilt der erste für oben links und unten rechts, der zweite für die beiden anderen Ecken.
Wie mache ich einen Kreis mit CSS?
Geben Sie einem quadratischen Element border-radius: 50%. Bei einem Rechteck entsteht mit 50% eine Ellipse; für eine Pillenform mit halbrunden Enden nehmen Sie einen sehr großen Pixelwert.
Was bedeutet der Schrägstrich in border-radius?
Vor dem Schrägstrich stehen die horizontalen, danach die vertikalen Radien. Damit werden die Ecken elliptisch statt kreisrund.
Warum werden Bilder in einer abgerundeten Box nicht mit abgerundet?
Kindelemente ragen über die runden Ecken hinaus. Setzen Sie overflow: hidden auf die Box oder geben Sie dem Bild selbst denselben border-radius.
Sollte ich px oder % verwenden?
Für gleichmäßig runde Ecken an Karten und Knöpfen sind px oder rem üblich, weil sie unabhängig von der Größe gleich aussehen. Prozent eignet sich für Kreise, Ellipsen und organische Formen, die mit dem Element skalieren sollen.
Wie runde ich nur eine Ecke mit CSS ab?
Mit der Einzeleigenschaft, etwa border-top-left-radius: 12px, oder in der Kurzform mit Nullen für die übrigen Ecken: border-radius: 12px 0 0 0. Im Generator schalten Sie dazu „Alle Ecken gleich“ aus.
Warum hat meine Tabelle trotz border-radius eckige Ecken?
Bei border-collapse: collapse wirkt border-radius auf Tabellen nicht. Setzen Sie border-collapse: separate mit border-spacing: 0 oder legen Sie die Tabelle in einen Container mit border-radius und overflow: hidden.
Das könnte auch helfen
Farbumwandler
HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.
ÖffnenFarbpalette aus Bild
Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.
ÖffnenKontrast prüfen (WCAG)
Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.
ÖffnenCSS-Gradient-Generator
Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.
ÖffnenBox-Shadow-Generator
CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.
ÖffnenFlexbox-Generator
Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.
Öffnen