Stu Nicholls | CSS PLAY | CSS corner-shape superellipse

Date : 5th November 2025

For Edge, Chrome and Opera at the moment

American style post box

.outer {width:90%; max-width:400px; aspect-ratio:1; position:relative; margin:50px auto;}

.outer div {width:100%; height:100%; border-radius: 50%; position:absolute;}

.p1 {corner-shape: superellipse(5); background:#008;}
.p2 {corner-shape: superellipse(4.6); background:#00a;}
.p3 {corner-shape: superellipse(4.2); background:#00c;}
.p4 {corner-shape: superellipse(3.8); background:#00f;}
.p5 {corner-shape: superellipse(3.4); background:#02f;}
.p6 {corner-shape: superellipse(3); background:#04f;}
.p7 {corner-shape: superellipse(2.6); background:#05f;}
.p8 {corner-shape: superellipse(2.2); background:#06f;}
.p9 {corner-shape: superellipse(1.8); background:#07f;}
.p10 {corner-shape: superellipse(1.4); background:#08f;}
.p11 {corner-shape: superellipse(1); background:#09f;}
.p12 {corner-shape: superellipse(0.6); background:#0af;}
.p13 {corner-shape: superellipse(0.2); background:#0bf;}
.p14 {corner-shape: superellipse(-0.2); background:#0af;}
.p15 {corner-shape: superellipse(-0.6); background:#09f;}
.p16 {corner-shape: superellipse(-1); background:#08f;}
.p17 {corner-shape: superellipse(-1.4); background:#07f;}
.p18 {corner-shape: superellipse(-1.8); background:#06f;}
.p19 {corner-shape: superellipse(-2.2); background:#05f;}
.p20 {corner-shape: superellipse(-2.6); background:#04f;}
.p21 {corner-shape: superellipse(-3); background:#02f;}
.p22 {corner-shape: superellipse(-3.4); background:#00f;}
.p23 {corner-shape: superellipse(-3.8); background:#00c;}
.p24 {corner-shape: superellipse(-4.2); background:#00a;}
.p25 {corner-shape: superellipse(-4.6); background:#008;}
.p26 {corner-shape: superellipse(-5); background:#006;}

Information

Just having fun with the latest CSS style corner-shape:superellipse(). The first six demonstrations use just one empty <div> with minimal CSS. The last demonstration uses a set of 26 nested <div> with decreasing superellipse values and changes of background colors.

See Corner-shape for more information.
See Superellipse() for more information.

Please consider making a donation, every little helps.

CSS PLAY

Doing It With Style

DEMOS › CSS having fun with corner-shape:superellipse()

Date : 5th November 2025

For Edge, Chrome and Opera at the moment

American style post box

Information