CSS corner-inline-start-shape Property

Description

The corner-inline-start-shape CSS property specifies the geometric outline used to form or clip the corner on the inline-start side of a box. Instead of relying solely on circular or elliptical radii, this property lets authors define a precise corner profile - for example a custom path, polygonal notch, or smoothly curved profile - that the user agent uses when painting backgrounds, borders, and when performing overflow clipping for that corner. It is intended to give fine-grained control over a single logical corner so that designers can create asymmetrical or flow-relative corner treatments without resorting to extra wrapping elements or complex mask images.

Because the property targets the inline-start corner, its effect is flow-relative: the physical side that is considered “inline-start” depends on text direction and writing mode. That means the corner affected can be left, right, top, or bottom in physical terms as the document’s orientation changes; the property therefore composes naturally with logical layout. Authors who use different logical corners in the same design typically pair this property with the document’s writing and direction settings to produce predictable results across locales and vertical writing modes - for example, via writing-mode.

In typical rendering, the shape defined by this property participates in painting and hit-testing: it can alter how a border is drawn at that corner, how the background is clipped, and how overflowing content is masked at that corner’s edge. It also interoperates with other corner- and clipping-related features: you can think of it as an alternative or supplement to rounded corners provided by border-radius, and in many cases it can be used alongside more general clipping mechanisms such as clip-path to achieve complex decorative or functional visuals. Because the shape directly affects visuals and interaction regions, designers should consider its impact on focus outlines, hit targets, and accessible affordances when applying highly non-rectangular corners.

Practical considerations when using this property include performance and fallbacks: complex shapes or very frequent changes can affect painting cost, and not all user agents may expose the same antialiasing quality, so a conservative visual design with sensible fallbacks usually works best. It is commonly applied at the element level for decorative box corners, but can also be combined with other corner-* properties to build a complete, coherent corner system for a component without extra markup.

Definition

Initial value: see individual properties
Applies to: see individual properties
Inherited: no
Computed value: see individual properties
Animatable: see individual properties
JavaScript syntax: object.style.cornerInlineStartShape

Syntax

corner-inline-start-shape: <corner-shape>{1,2}

Values

The property accepts one or two <corner-shape-value> values. 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="wrapper">

    <h1>corner-inline-start-shape demo</h1>



    <div class="examples">

        <div class="box ltr">

            <span class="label">LTR  -  inline start (left)</span>

        </div>



        <div class="box rtl">

            <span class="label">RTL  -  inline start (right)</span>

        </div>

    </div>

</div>

CSS

/* Demo layout */
.wrapper {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    padding: 32px;
    background: #f6f7fb;
    min-height: 100vh;
    box-sizing: border-box;
}

h1 {
    margin: 0 0 16px 0;
    font-size: 18px;
    color: #1f2937;
}

.examples {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* Shared box styling */
.box {
    width: 260px;
    height: 140px;
    display: grid;
    border-radius: 30px;
    place-items: center;
    color: #111827;
    font-weight: 600;
    border: 4px solid #222;
    box-shadow: 0 6px 18px rgba(16,24,40,0.08);
    background: linear-gradient(135deg, #fffaf0, #fff0f6);
    transition: transform 240ms ease, box-shadow 240ms ease;
}

.box:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(16,24,40,0.12);
}

.label {
    padding: 6px 12px;
    background: rgba(255,255,255,0.6);
    border-radius: 8px;
    backdrop-filter: blur(4px);
}

.box.ltr {
    corner-inline-start-shape: scoop;
}

.box.rtl {
    direction: rtl;
    corner-inline-start-shape: bevel;
    background: linear-gradient(135deg, #f0f8ff, #f3e8ff);
}

/* Small responsive tweak */
@media (max-width: 520px) {
    .examples {
        flex-direction: column;
        gap: 12px;
    }

    .box {
        width: 100%;
    }
}

Result

Editor

Browser Support

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