CSS/Eigenschaften/border-end-end-radius

Die Eigenschaft border-end-end-radius bestimmt die Radien, mit dem diejenige Ecke eines Elements abgerundet wird, die auf der Start-Seite der Blockachse und der Start-Seite der Inlineachse liegt. Der Browser bildet dafür border-end-end-radius auf eine passende 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. Gibst du 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 du Prozentangaben verwendest, 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-end-end-radius: 1em .5em; }

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

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

Siehe auch

• Rahmen und Ribbons

Weblinks

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