CSS INTENSIVSTATION

CSS Border-Radius

Mit border-radius lassen sich Ecken von Elementen abrunden. Dabei können alle Ecken gemeinsam oder jede Ecke einzeln definiert werden.

Syntax für border-radius

Jede Ecke eines Elements besitzt einen eigenen Radius:

  • links oben → border-top-left-radius
  • rechts oben → border-top-right-radius
  • rechts unten → border-bottom-right-radius
  • links unten → border-bottom-left-radius

Diese Eigenschaften können einzeln verwendet oder über die Kurzschreibweise border-radius zusammengefasst werden.

Werte: px | rem | em | %

border-radius Beispiele

Sind alle Ecken gleich stark gerundet, genügt eine einzelne Angabe.

Regelmässig gerundete Ecken
border-radius: 15px;

Tipp: Bei quadratischen Elementen erzeugt border-radius: 50% einen Kreis.

Ecken einzeln definieren (Kurzschreibweise)

CSS erlaubt es, mehrere Werte in einer einzigen Zeile anzugeben. Das reduziert Code und erhöht die Lesbarkeit.

Reihenfolge der Werte:
links oben → rechts oben → rechts unten → links unten

Bei weniger als vier Werten gilt:
1 Wert → alle Ecken gleich
2 Werte → oben links & unten rechts / oben rechts & unten links
3 Werte → vierter Wert entspricht dem zweiten

Tab-Style
border-radius: 15px 15px 0 0;
Diagonal gerundete Ecken
border-radius: 0 25px 0 25px;
Unregelmässige Rundung
border-radius: 0 25px 15px 50px;

Unterschiedlicher horizontaler und vertikaler Radius

border-radius kann zwei Werte-Sets enthalten:

  • vor dem / → horizontaler Radius
  • nach dem / → vertikaler Radius

Jedes Set besteht aus bis zu vier Werten (eine Angabe pro Ecke). Wird kein zweites Set definiert, gilt der horizontale Radius automatisch auch vertikal.

Vier unterschiedlich gerundete Ecken
border-radius: 50px 20px 5px 20px / 10px 5px 10px 5px;
Elliptischer Radius an einer Ecke
border-bottom-right-radius: 25px 50px;