Firefox Tomorrow

css property

`corner-block-end-shape` CSS property

View on MDN ↗

Limited availability

The corner-block-end-shape CSS property specifies the shape of both the corners on a box’s block-end edge, within their border-radius area.

For a full description of corner shape behavior and multiple examples, see the corner-shape shorthand property page.

Constituent properties

The corner-block-end-shape property is a shorthand for the following logical properties:

Syntax

/* Single keyword value set for both corners */
corner-block-end-shape: square;
corner-block-end-shape: scoop;

/* Single superellipse() value set for both corners */
corner-block-end-shape: superellipse(3.5);
corner-block-end-shape: superellipse(-1.9);

/* Block-end/inline-start corner, block-end/inline-end corner */
corner-block-end-shape: square scoop;
corner-block-end-shape: square superellipse(-1.9);

/* Global values */
corner-block-end-shape: inherit;
corner-block-end-shape: initial;
corner-block-end-shape: revert;
corner-block-end-shape: revert-layer;
corner-block-end-shape: unset;

Values

The corner-block-end-shape property is specified using one or two <corner-shape-value> values:

  • If one value is used, it specifies the shape of both block-end corners.
  • If two values are used, the first one specifies the shape of the block-end/inline-start corner, and the second one specifies the shape of the block-end/inline-end corner.

Formal definition

Formal syntax

Examples

You can find other related examples on the corner-shape reference page.

Basic corner-block-end-shape usage

HTML

The markup for this example contains a single <div> element.

<div></div>

CSS

We give the box some basic styles, which we’ve hidden for brevity. We also apply a box-shadow, a border-radius of 80px / 40px, and a corner-block-end-shape of notch square.

body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: cyan;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 80px / 40px;
  corner-block-end-shape: notch square;
}

Result

The rendered result looks like this:

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also