CSS corner-end-start-shape Property

Description

The corner-end-start-shape property controls the geometric form used to render the specific corner that lies at the intersection of the block-end and inline-start edges of an element’s box. Because it is a logical corner property, its meaning tracks writing mode and direction: in different combinations of writing-mode and direction it will map to different physical corners on the screen, so authors can specify corner geometry in flow-relative terms rather than tying designs to top/right/bottom/left. The property determines how that corner is clipped and painted - for example, whether it appears rounded, chamfered, inset, or follows a custom curve - and thus becomes part of the element’s outer contour used for background painting and border rendering.

This property is intended to work alongside other box- and shape-related CSS features to produce the final outline of an element. In particular it composes with traditional corner controls such as border-radius when browsers compute the resolved corner outline, and it can influence how borders and backgrounds are masked or drawn at that corner. It also has implications for text-wrapping and float avoidance when used with float and shape properties like shape-outside, because the exact corner geometry can alter the silhouette the layout engine uses for shaping inline content around an element.

Practically, authors use corner-end-start-shape when they need per-corner control of complex corner forms in a writing-mode-aware way - for instance, giving only that logical corner an inset notch or a special curve while other corners keep different shapes. Because it affects the painted outline and clipping region, changing this property can alter hit-testing and overflow clipping as well as visual appearance; where precise control of the element’s contour is needed (for clipping, visual effects, or interaction regions) this property provides a targeted tool. Implementations may also allow smooth interpolation between corner shapes for transitions and animations, so designers can animate corner geometry changes where supported.

Definition

Initial value: round
Applies to: all elements where border-radius can apply
Inherited: no
Computed value: n/a
Animatable: yes
JavaScript syntax: object.style.cornerEndStartShape

Syntax

corner-end-start-shape: <corner-shape>

Values

The property accepts one <corner-shape-value> value. These define the style of the corner shape:

Keyword Values

round - The default value. Creates a standard rounded corner (equivalent to traditional border-radius).
scoop - Creates an inward-facing curve (concave), making the corner look "bitten" out.
bevel - Creates a flat, diagonal cut across the corner (chamfered look).
notch - Creates a rectangular step-like cutout at the corner.
square - Straight angle corner (no rounding)
squircle - Intermediate shape between round and square

Functional Value

superellipse(<number>) - Determines corner curvature using a superellipse curve.
- Larger positive numbers → closer to a square
- Values around 1 → default/round
- Negative values → inverted/concave shapes
- infinity and -infinity are allowed as extremes ([MDN Web Docs][1])

Global CSS Values

inherit
initial
revert
revert-layer
unset

Example

HTML

<div class="container">

    <div class="card card--ltr">

        <h2>LTR / horizontal-tb</h2>

        <p>corner-end-start-shape: rounded;</p>

    </div>



    <div class="card card--rtl">

        <h2>RTL / horizontal-tb (dir=rtl)</h2>

        <p>corner-end-start-shape: notched;</p>

    </div>



    <div class="card card--vertical">

        <h2>vertical-rl</h2>

        <p>corner-end-start-shape: beveled;</p>

    </div>

</div>

CSS

/* Layout */
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: #f3f6f9;
    padding: 36px;
    display: flex;
    justify-content: center;
}

.container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Card styles and visual fallback */
.card {
    width: 260px;
    padding: 18px;
    border: 6px solid #1f618d;
    background: linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    border-radius: 12px; /* fallback for browsers that don't support corner-* properties */
}

.card h2 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #16324a;
}

.card p {
    margin: 0;
    font-size: 13px;
    color: #2b3b4a;
}

.card--ltr {
    /* In a left-to-right horizontal flow this targets the top-left logical corner */
    corner-end-start-shape: bevel;
    border-radius: 25px;
}

.card--rtl {
    /* Switch writing direction to demonstrate logical-corner mapping */
    direction: rtl;
    corner-end-start-shape: scoop;
    border-radius: 25px;
}

.card--vertical {
    /* Vertical writing mode changes which physical corner is affected */
    writing-mode: vertical-rl;
    corner-end-start-shape: bevel;
    border-radius: 25px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS corner-end-start-shape property. Hover over a browser icon to see the version that first introduced support for this CSS property.