CSS corner-inline-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-inline-end-shape property defines the geometric shape used to form an element’s corner at the inline end edge according to the current writing direction. In practice this lets authors move beyond simple circular rounding at a single corner, specifying a distinct corner geometry for the inline‑end corner of the box (the logical corner that corresponds to the end of the inline flow). It is primarily a painting/decoration concern: it determines how that corner is rendered when the UA draws the element’s background, border and clipping for that corner area.

Using corner-inline-end-shape you can produce a wide variety of corner treatments - for example fully rounded, chamfered, clipped or entirely custom polygonal corners - which can be particularly useful for components such as cards, buttons, badges and illustrative UI elements. Because it targets a logical (inline) corner, the same stylesheet can produce mirrored results automatically for different writing modes or directionality without separate rules for left/right corners. This makes layout more robust when supporting horizontal versus vertical writing modes or right-to-left languages.

This property composes with other corner- and box-related properties when producing the final painted shape. For instance you might combine it with border-radius semantics or use it alongside a custom clipping defined by clip-path to achieve complex silhouettes; it also pairs conceptually with the matching logical corner properties such as corner-inline-start-shape so each corner can be controlled independently. Because corner shaping affects the painted outline and clipping region, it will influence hit testing and overflow visuals and should be considered when animating or transitioning an element’s outline.

From a practical point of view, authors should treat corner-inline-end-shape as a visual styling tool that interacts with layout direction and the box model. Changes to the corner shape affect how backgrounds, borders and shadows are clipped and can require adjustments to spacing and overflow handling to avoid visual artifacts. It also works well with gradual transitions and motion design: animating corner geometry can create smooth, expressive UI effects, but you should test for rendering artifacts (aliasing, compositing) across shapes and consider accessibility and focus outlines so that interactive elements remain discoverable and usable.

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

Syntax

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

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

  <div class="cards">

    <div class="card shape-circle">

      <p>circle at inline-end</p>

    </div>



    <div class="card shape-inset">

      <p>inset rounded at inline-end</p>

    </div>

  </div>

</div>

CSS

/* Layout and base styles */
.demo {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  padding: 32px;
  background: #f7f7fb;
  min-height: 100vh;
  box-sizing: border-box;
}

h2 {
  margin: 0 0 18px 0;
  font-size: 18px;
  color: #0f172a;
}

.cards {
  display: flex;
  gap: 24px;
  align-items: center;
}

.card {
  width: 220px;
  height: 160px;
  display: flex;
  border-radius: 30px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  overflow: visible; /* allow corner-shape to be visible */
}

.card.shape-circle {
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  corner-inline-end-shape: scoop;
}

.card.shape-inset {
  background: linear-gradient(135deg, #5eead4, #06b6d4);
  corner-inline-end-shape: bevel;
}

Result

Editor

Browser Support

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