corner-end-end-shape
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
Thecorner-end-end-shapeCSS property specifies the shape of a box's block-end and inline-end corner, within itsborder-radius area.
For a full description of corner shape behavior and multiple examples, see thecorner-shape shorthand property page.
Syntax
/* Keyword values */corner-end-end-shape: scoop;corner-end-end-shape: notch;/* superellipse() function values */corner-end-end-shape: superellipse(4);corner-end-end-shape: superellipse(-0.5);/* Global values */corner-end-end-shape: inherit;corner-end-end-shape: initial;corner-end-end-shape: revert;corner-end-end-shape: revert-layer;corner-end-end-shape: unset;Values
Thecorner-end-end-shape property is specified using a<corner-shape-value> value.
Formal definition
| Initial value | round |
|---|---|
| Applies to | all elements. It also applies to::first-letter. |
| Inherited | no |
| Computed value | The correspondingsuperellipse() value. |
| Animation type | Animates as persuperellipse interpolation. |
Formal syntax
corner-end-end-shape =
<corner-shape-value>
<corner-shape-value> =
round|
scoop|
bevel|
notch|
square|
squircle|
<superellipse()>
<superellipse()> =
superellipse(<number>|
infinity|
-infinity)
Examples
You can find other related examples on thecorner-shape reference page.
Basiccorner-end-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 abox-shadow, aborder-radius of 60 pixels, and acorner-end-end-shape ofsquircle.
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: green; 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: 60px; corner-end-end-shape: squircle;}Result
The rendered result looks like this:
Specifications
| Specification |
|---|
| CSS Borders and Box Decorations Module Level 4 # propdef-corner-end-end-shape |
Browser compatibility
See also
corner-shapeshorthand propertycorner-start-start-shape,corner-start-end-shape, andcorner-end-start-shapecorner-top-left-shape,corner-top-right-shape,corner-bottom-left-shape, andcorner-bottom-right-shapeborder-radiusshorthand propertyborder-end-end-radius- CSS borders and box decorations module
- CSS backgrounds and borders module