CSS corner-block-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-block-end-shape property defines the geometric treatment applied to the block-end corner of an element in the current logical flow. In practice this means it controls how the corner on the end side of the block axis is rendered - whether it appears rounded, cut, inset, or follows a custom outline - and that geometric description is used by the browser when painting backgrounds and borders, when clipping overflow, and when performing hit-testing for pointer events at that corner.

Because it is a logical property, the effective physical corner it corresponds to depends on the element’s writing mode and direction: the same corner-block-end-shape value can map to different physical corners on a horizontal- versus vertical-writing page. That relationship ties it closely to layout orientation; authors who need to reason about which physical corner is affected should consider how the element’s orientation is established by writing-mode and related direction properties.

This property is intended to compose with the rest of an element’s corner and shape model. For example, its visual result will interact with traditional corner control such as border-radius, and can be used alongside explicit clipping or complex outlines created with clip-path. It is also conceptually aligned with float and text flow shaping features like shape-outside, and pairs naturally with its logical counterpart corner-block-start-shape to provide consistent start/end corner treatments in internationalized layouts. When combining these capabilities authors should test visual continuity at adjacent corners and consider how corner shapes affect overflow clipping and interactive hit areas.

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

Syntax

corner-block-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="cards">

  <section class="card example-1">

    <h2>Horizontal (default)</h2>

    <p>This card uses corner-block-end-shape: circle(...). The block-end corner (depends on writing mode) is shaped.</p>

  </section>



  <section class="card example-2 vertical">

    <h2>Vertical (writing-mode)</h2>

    <p>Writing mode is vertical-rl; block-end corner becomes a different logical corner. This uses ellipse(...).</p>

  </section>

</div>

CSS

/* Basic layout */
.cards {
  display: flex;
  gap: 20px;
  padding: 24px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Card visual */
.card {
  width: 260px;
  min-height: 160px;
  padding: 18px;
  color: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  /* logical corner shape applied to the block-end corner (depends on writing-mode) */
  corner-block-end-shape: bevel;
  /* shape-outside / clip-path are separate properties; corner-* is a logical corner-shaping property */
}

/* Vertical example uses a different shape and different writing mode */
.card.vertical {
  writing-mode: vertical-rl;
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
  corner-block-end-shape: scoop;
}

/* Typographic */
.card h2 {
  margin: 0 0 8px 0;
  font-size: 1.05rem;
}
.card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.3;
}

Result

Editor

Browser Support

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