Corner shape

The CSS corner-shape property controls how border-radius curves are drawn. Instead of standard circular arcs, you can use squircles (iOS-style), bevels, scoops, notches, and arbitrary superellipse values.

Browser Support

corner-shape is supported in Chrome 139+ (~68% of users). Firefox and Safari do not support it yet. Every utility sits inside @supports (corner-shape: squircle), so an engine without it ignores them.

Quick reference

class	styles
corner-round	corner-shape: round
corner-scoop	corner-shape: scoop
corner-bevel	corner-shape: bevel
corner-notch	corner-shape: notch
corner-square	corner-shape: square
corner-squircle	corner-shape: squircle
corner-<number>	corner-shape: superellipse(<number>)
corner-infinity	corner-shape: superellipse(infinity)
-corner-<number>	corner-shape: superellipse(-<number>)
corner-t-<value>	corner-top-left-shape + corner-top-right-shape: <value>
corner-r-<value>	corner-top-right-shape + corner-bottom-right-shape: <value>
corner-b-<value>	corner-bottom-left-shape + corner-bottom-right-shape: <value>

Basic usage

Combine corner-* with rounded-* to change how corners are drawn:

Default round

Squircle

The corner-shape property changes the curve shape. You still need border-radius (rounded-*) to set the corner size.

Named shapes

Six named shapes:

round

scoop

bevel

notch

square

squircle

Superellipse values

Use numeric values to control the superellipse exponent:

0.5

1

2

3

infinity

Side and corner variants

Apply shapes to specific sides or individual corners:

corner-t-squircle

corner-tr-bevel

mixed

Physical vs logical

Logical	LTR Equivalent
corner-s-*	corner-l-*
corner-e-*	corner-r-*
corner-ss-*	corner-tl-*
corner-se-*	corner-tr-*
corner-ee-*	corner-br-*
corner-es-*	corner-bl-*

Negative values

Prefix with - to negate the exponent, which flips the curve inward:

corner-1

-corner-1

corner-2

-corner-2

corner-3

-corner-3

Negative values work with all directional variants:

-corner-t-3

-corner-b-3

-corner-tl-3 corner-br-3

-corner-2 corner-t-squircle

Using a custom value

Use the corner-[<value>] syntax to pass a superellipse value of your own:

corner-2.5

corner-[superellipse(4.2)]

Using a custom variable

For CSS variables, you can also use the corner-(--custom-property) syntax:

corner-(--brand-roundness)

This is shorthand for corner-[var(--brand-roundness)]. It adds the var() wrapper for you.

Applying conditionally

Hover and focus states

Prefix a corner utility with a variant like hover:*:

Hover for squircle

Import

Included in @import 'tw-jib-css-experimental'. To take it on its own, with no other experimental module, and none of the @function overrides:

@import 'tw-jib-css-experimental/corner';

This entry reads nothing from tw-jib-css, so it costs you no color machinery you aren't using.

Baseline status

What these utilities are built on, live from the Web Platform Dashboard.