CSS/Eigenschaften/border-start-end-radius

Die Eigenschaft border-start-end-radius bestimmt die Radien, mit dem diejenige Ecke eines Elements abgerundet wird, die auf der Start-Seite der Blockachse und der Ende-Seite der Inlineachse liegt. Der Browser bildet dafür border-start-end-radius auf eine passende physische border-radius-Einzeleigenschaft ab, abhängig davon, welche Werte für die Eigenschaften writing-mode, direction und text-orientation festgelegt sind.

Erlaubte Werte

ein oder zwei nicht negative numerische oder Prozentangaben. Geben Sie zwei Werte an, bezieht sich der erste Wert immer auf die horizontale Achse, der zweite Wert auf die vertikale Achse, auch wenn das unlogisch klingt. Wenn Sie Prozentangaben verwenden, wird der Radius in der jeweiligen Richtung als Prozentwert der Elementgröße in dieser Richtung berechnet.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

0 (keine Abrundung)

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

ja

Beispiel

div { border-start-end-radius: 1em .5em; }

Die Ecke am Start der Block-Achse und am Ende der Inline-Achse wird ellipsenförmig abgerundet.

Beachten Sie: Der Radius wird auch auf Hintergründe und Schatteneffekte angewendet, selbst wenn das Element über keinen Rahmen verfügt.

Siehe auch

• CSS/Tutorials/Boxmodell/Rahmen

Weblinks

• Spezifikation (W3C): flow-relative corder rounding
• MDN: border-start-start-radius