Study · CSS · Shape

Shaping corners with superellipses

The same radius, a different character. Explore the curve between a bevel and a squircle.

corner-shape: superellipse(2); border-radius: 42%;

Curve 2Radius 42%

This browser shows rounded corners instead. You can still adjust the radius.

Border radius sets how far a corner reaches into a shape. The superellipse() function changes the path it takes. Adjust the curve while keeping the radius still to see how much character lives in that small detail.

A curve value of 0 makes a bevel, 1 gives an ordinary rounded corner, and 2 creates a squircle. Higher values make the corner more square. The radius control changes the size of that treatment without changing its character.

Content that sizes itself

Querying a component state

Navigation that follows the scroll

Anchored content that knows when to hide

Branching and progress in CSS

Counting siblings in CSS

Randomness in CSS

A stateful scroll surface

Typed HTML attributes in CSS

Layout primitives in CSS

Colour relationships in CSS

Styling a native select

Shapes and CSS functions

Placement and scoped transitions

A colour axis with contrast

Geometry with CSS

Shaping corners with superellipses

Theme

Shaping corners with superellipses