CSS/Eigenschaften/corner-shape

Browserunterstützung
caniuse.com

Die Eigenschaft corner-shape ist die Kurzschreibform für die Form der Ecken einer Box, die innerhalb des durch border-radius festgelegten Bereichs erzeugt wird.

Sie ist die Shorthand-Eigenschaft für die folgenden physikalischen Eigenschaften:

• corner-top-left-shape
• corner-top-right-shape
• corner-bottom-left-shape
• corner-bottom-right-shape

Erlaubte Werte

• bevel: abgeschrägt
• notch: eingekerbt
• round: rund
• scoop: (mit einer Schöpfkelle) eingedellt / Rundung geht nach innen
• square: 90°-Winkel wie ohne border-radius
• squircle: ähnlich wie round
• superellipse():

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

siehe Einzeleigenschaften

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

ja

Beispiel

aside {
	border-radius: 2em;
	corner-shape: bevel;
}
aside h2 {
	border-radius: 1em;
	corner-shape: scoop;
	padding-inline: 1em;
}

Sowohl das aside als auch die dazugehörende h2 erhalten einen border-radius. Innerhalb dieses Radius werden die Ecken des aside abgeschrägt – die Ränder der Überschrift eingewölbt.

Siehe auch

• Rahmen und Ribbons
  • Wichtiges mit Rahmen hervorheben
  • Ribbons (Hintergrundbänder)
  • box-shadow und filter
   

Weblinks

• CSSWG: corner-shape (CSS Borders and Box Decorations Module Level 4)
• MDN: corner-shape
• Details: caniuse.com

corner-shape-Generator

Randlinien mit corner-shape ansehen …