CSS corner-start-start-shape Property

Description

The corner-start-start-shape property defines the geometric treatment applied to the single logical corner that lies at the start of both the inline and block axes of an element. In practice this means it controls the visual shape of that corner - how it is clipped, rounded, notched or otherwise modified - independent of the other three corners. Because it is a logical corner property, its effect follows the element’s writing mode and direction: the corner that is affected will be the physical corner that corresponds to “inline-start” and “block-start” in the current layout orientation.

This property influences how backgrounds, borders and hit areas are drawn in that corner area. When a non-rectangular corner is specified the element’s border painting and background filling are clipped to the corner geometry, so the visual join between edge and corner changes. It works in concert with other corner-related properties and with classic edge treatments: for example, when both this property and a per-corner border rounding are applied the rendering engine resolves the two shapes to produce a single continuous corner outline. You can also combine it with shape or masking techniques to create more complex visuals - for example with clip-path to produce bespoke silhouette effects.

Because it is a logical property, corner-start-start-shape is especially useful for internationalized user interfaces: you can style a “start-start” corner once and have that style automatically map to the correct physical corner whether the document is left-to-right, right-to-left, or using vertical writing modes. That mapping is governed by the element’s writing direction and layout mode, so it interacts naturally with properties such as writing-mode. When animating or transitioning corner geometry, the rendering system interpolates the corner outline, which can produce smooth, organic motion for UI chrome and decorative elements.

When using this property in design systems, consider how it composes with legacy corner treatments. If you want consistent rounded corners across older and newer browsers, you may pair it with the familiar border-radius approaches as a fallback or to achieve layered corner effects. Also think about hit testing and layout: visually altering a corner can change perceived clickable areas and overlap behavior with neighboring elements, so test interactions if the corner shape meaningfully removes or exposes parts of the element’s rectangle.

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.cornerStartStartShape

Syntax

corner-start-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='wrap'>

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

  <div class='row'>

    <div class='card card--round'>

      Rounded logical start-start corner

    </div>

    <div class='card card--bevel'>

      Beveled logical start-start corner

    </div>

    <div class='card card--rtl' dir='rtl'>

      RTL example (corner follows 'start')

    </div>

  </div>

</div>

CSS

/* Basic layout */
:root {
  --bg: #0ea5a4; /* teal */
  --bg2: #7c3aed; /* violet */
  --gap: 16px;
}
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; padding: 24px; background: #f8fafc; }
.wrap { max-width: 900px; margin: 0 auto; }
h1 { margin: 0 0 16px 0; font-size: 18px; }
.row { display: flex; gap: var(--gap); flex-wrap: wrap; }
.card {
  min-width: 220px;
  padding: 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--bg), var(--bg2));
  border: 1px solid rgba(255,255,255,0.15);
}

/* Example 1: Rounded logical start-start corner */
.card--round {
  corner-start-start-shape: round;
  /* Logical and physical fallbacks */
  border-start-start-radius: 24px; /* logical fallback */
  border-top-left-radius: 24px;    /* physical fallback for LTR */
}

/* Example 2: Beveled logical start-start corner */
.card--bevel {
  border-radius: 10px;
  corner-start-start-shape: bevel;
}

/* Example 3: Right-to-left direction  -  'start' maps to the right */
.card--rtl {
  direction: rtl;
  corner-start-start-shape: scoop;
  border-start-start-radius: 20px;
  border-top-right-radius: 20px; /* physical fallback for RTL */
}

Result

Editor

Browser Support

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