CSS corner-end-end-shape Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The corner-end-end-shape property controls the geometric treatment applied to the box corner that sits at the logical "end" of both the inline and block axes. In practice this means it defines how that particular corner is carved or rounded in the element’s outer shape and in the area used for painting backgrounds, borders and clipping. Because it targets a logical corner, its effect follows writing-mode, direction and text-orientation: the visual corner that is modified will change when the document switches between LTR/RTL or horizontal/vertical writing modes.

This property is intended to be used alongside other corner or border shaping features to create asymmetric, language-aware corner designs on components - for example, a single corner can be softened while others remain sharp. It interacts closely with traditional corner and border shaping; changes to this logical corner will affect how the element’s border and background are painted and how any overflow is clipped. For reference on a more general corner-shaping mechanism see border-radius.

Designers often use this property to achieve subtle visual distinctions (cards with a single rounded corner, badges with a notched corner) or to adapt UI chrome to different writing systems without changing the markup. It’s also useful for transitions and animations where a component’s personality shifts (for example, from a square to a softened corner on hover); when animating, smooth interpolation depends on the underlying shape types being compatible. Because it alters the element’s painted and clipped outline, changes to this property can also influence hit testing and how shadows or overlapping content interact with the element.

Practical considerations include combining corner shaping with other clipping tools for complex silhouettes - for instance, using a dedicated clipping resource when you need an intricately cut outline - and ensuring that focus indicators, borders, or shadows remain visible and accessible when corners are heavily modified. For more complex clipping workflows that operate on the element’s outline itself, see clip-path.

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

Syntax

corner-end-end-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="demo">

  <div class="card">

    <h2>corner-end-end-shape</h2>

    <p>Example: round 36px at the inline-end / block-end corner.</p>

  </div>

</div>

CSS

/* Layout */
.demo {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f3f4f6;
  padding: 24px;
  box-sizing: border-box;
}

/* Card with logical writing direction (LTR) */
.card {
  width: 320px;
  padding: 24px;
  background: linear-gradient(135deg, #ffd7a8, #ffb4a2);
  color: #2b2b2b;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.06);
  writing-mode: horizontal-tb;
  direction: ltr;
  border-radius: 30px;

  /* Experimental logical corner property */
  corner-end-end-shape: scoop;
}

/* Typography */
.card h2 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
}

.card p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

Result

Editor

Browser Support

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