CSS corner-start-end-shape Property

The corner-start-end-shape property controls the geometric form applied to the logical "start–end" corner of a box - that is, the corner formed where the inline-start edge meets the block-end edge in the current writing mode and direction. Instead of being tied to a physical corner like “top-right”, it follows the flow of content, so the same declaration adapts automatically when writing direction or block orientation changes. Authors use it to create non-rectangular corners (not just circular radii) at that specific logical corner, allowing visually distinct corner styles on different sides of a single box without rewriting rules for each physical corner.

Visually, this property influences how the box’s outer outline is rendered and how its background is painted near that corner. It composes with the other corner-shape longhands to produce asymmetric corners and interacts with border painting - think of it as a shape primitive that determines where borders and backgrounds are clipped or inset at that corner. For comparison, the legacy way to make rounded corners is with border-radius, but logical corner-shape properties let you express those adjustments relative to flow direction and offer a broader palette of geometric forms beyond simple elliptical rounding.

Because the property targets geometry rather than content, it also affects hit testing, event regions, and overflow clipping: pointer targets or visible overflow can change when the corner shape removes or adds area from the box’s visual footprint. It can be animated or transitioned to produce smooth corner-morphing effects, and it can be combined with other graphic techniques such as clip-path to create complex framed or inset designs. In practice, designers use it to craft UI elements that adapt across locales and writing modes while maintaining consistent, intentional corner styling.