Border-Radius-Generator

Stellen Sie die Rundung jeder Ecke ein und kopieren Sie den border-radius-Code. Im erweiterten Modus erhält jede Ecke einen eigenen horizontalen und vertikalen Radius – so entstehen organische Formen (Blobs).

So funktioniert border-radius

border-radius akzeptiert einen bis vier Werte, die im Uhrzeigersinn beginnend oben links angewendet werden: 10px rundet alle Ecken gleich; 10px 20px gibt der Ecke oben links und unten rechts 10px und den beiden anderen 20px; 10px 20px 30px 40px legt jede Ecke einzeln fest. Es gibt auch Einzeleigenschaften wie border-top-left-radius.

Mit einem Schrägstrich geben Sie unterschiedliche horizontale und vertikale Radien an, wodurch jede Ecke zu einem Viertel einer Ellipse wird: 50% / 60% 60% 40% 40% zeichnet ein Ei. So entstehen die organischen Formen oder „Blobs“, die im aktuellen Webdesign so beliebt sind.

Kreise und Pillen

Für einen Kreis verwenden Sie border-radius: 50% auf einer quadratischen Box (sonst entsteht eine Ellipse). Für eine Pille oder eine Schaltfläche mit runden Enden nehmen Sie einen Pixelwert, der größer als die halbe Höhe ist, etwa 999px: Der Browser begrenzt ihn automatisch, und die Form verzerrt sich nicht, wenn sich die Breite ändert.

Abgerundete Ecken beschneiden auch Hintergrund und Schatten, aber keinen Inhalt, der über die Box hinausragt: Um ein Bild zu beschneiden, fügen Sie overflow: hidden hinzu.