DE

CSS Border-Radius-Generator

Der CSS-Border-Radius-Generator: Stellen Sie die Rundung aller Ecken gemeinsam oder jeder Ecke einzeln ein, in Pixeln oder Prozent, auf Wunsch elliptisch mit getrenntem horizontalem und vertikalem Radius. Der Generator schreibt den Wert in der kürzesten gültigen Form, zeigt die vier Einzeleigenschaften und rechnet aus, welche Radien der Browser bei Ihrer Boxgröße tatsächlich verwendet.

Quelle: css-backgrounds-3, § 4.1, W3C – CSS Backgrounds and Borders Module Level 3: the border-radius properties. Stand: .

Ecken einstellen

border-radius: 24px 8px;
Z. B. 12px, 50% oder 40px 10px / 20px 5px
px
px
Meine ToolboxIhre Eingaben werden nur in diesem Browser gespeichert.

Ergebnis

CSS-Deklaration (kürzeste Form)
border-radius: 24px 8px;
Einzeleigenschaften
EigenschaftWert
border-top-left-radius24px
border-top-right-radius8px
border-bottom-right-radius24px
border-bottom-left-radius8px
Verwendete Radien bei dieser Boxgröße
Eckehorizontalvertikal
Oben links24 px24 px
Oben rechts8 px8 px
Unten rechts24 px24 px
Unten links8 px8 px

So wird gerechnet

So liest der Browser border-radius

Die Kurzschreibweise nimmt ein bis vier Werte in der Reihenfolge oben links, oben rechts, unten rechts, unten links – im Uhrzeigersinn. Fehlende Werte ergänzt der Browser wie bei margin:

Abgerundete Ecken erstellen – so geht's

  1. Den Radius für alle Ecken gemeinsam einstellen oder die Kopplung lösen und jede Ecke einzeln setzen, in px oder %.
  2. Für elliptische Ecken horizontalen und vertikalen Radius getrennt wählen und Breite und Höhe der Box eintragen.
  3. Die kürzeste CSS-Deklaration kopieren und prüfen, welche Radien der Browser bei dieser Boxgröße tatsächlich verwendet.
AngabeBedeutung
12pxalle vier Ecken 12 px
24px 8pxoben links und unten rechts 24 px, oben rechts und unten links 8 px
24px 8px 4pxoben links 24 px, oben rechts und unten links 8 px, unten rechts 4 px
40px 10px / 20px 5pxelliptisch: vor dem Schrägstrich die horizontalen, dahinter die vertikalen Radien

Der Generator kürzt jede Eingabe auf die kleinste gleichwertige Form: 10px 10px 10px 10px wird zu 10px, ein Schrägstrich mit identischen Werten fällt weg.

Prozent: Breite und Höhe getrennt

Prozentwerte beziehen sich horizontal auf die Breite und vertikal auf die Höhe der Box. 50% ergibt deshalb bei einem Quadrat einen Kreis, bei einem Rechteck von 240 × 160 px eine Ellipse mit 120 px und 80 px Radius. Für einen Kreis in einem Rechteck nehmen Sie Pixel.

Wenn sich Rundungen überschneiden

Sind zwei benachbarte Radien zusammen größer als die Seite, verkleinert der Browser nach der W3C-Spezifikation alle Radien mit demselben Faktor f = min(Seitenlänge ÷ Summe der beiden Radien dieser Seite).

Beispiel „Pillenform“ border-radius: 9999px an einer Schaltfläche von 200 × 40 px: Links und rechts ist die Summe 9999 + 9999 = 19.998 px bei 40 px Höhe, also f = 40 ÷ 19.998 ≈ 0,002. Jede Ecke erhält 9999 × f = 20 px – genau die halbe Höhe, die Enden sind halbrund. Unter „Verwendete Radien“ sehen Sie diese Werte für Ihre Box.

Weitere CSS-Werkzeuge: Schatten baut der CSS Box-Shadow-Generator, Farbverläufe der CSS-Verlauf-Generator, und HEX-, RGB- oder HSL-Werte wandelt der Farbumrechner um.

Häufige Fragen

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 abgerundete Enden (Pillenform) eignet sich ein sehr großer Pixelwert wie 9999px.

Was bedeutet der Schrägstrich in border-radius?

Er trennt horizontale und vertikale Radien. 40px / 20px rundet jede Ecke als Viertel-Ellipse: 40 px in der Breite, 20 px in der Höhe. Mit bis zu vier Werten je Seite sind so acht Werte möglich.

Warum ist die Rundung kleiner als angegeben?

Weil sich die Rundungen sonst überschneiden würden. Der Browser verkleinert dann alle Radien im gleichen Verhältnis – auch Ecken, die allein gepasst hätten. Der Generator zeigt den Faktor und die tatsächlich verwendeten Radien.

Welche Reihenfolge haben die vier Werte?

Oben links, oben rechts, unten rechts, unten links – im Uhrzeigersinn, beginnend oben links. Die Einzeleigenschaften heißen border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius.

Wie runde ich nur eine Ecke ab?

Stellen Sie die Ecken einzeln ein und lassen Sie die übrigen auf 0. Nur unten links gerundet ergibt border-radius: 0 0 0 12px – gleichbedeutend mit border-bottom-left-radius: 12px.

Quellen und Rechtsgrundlagen

Stand: · So prüfen wir

Passende Werkzeuge