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. All utilities are wrapped in @supports (corner-shape: squircle) and will be silently ignored in unsupported browsers.
Import
Included in @import 'tw-jib-css/experimental'. To import individually:
@import 'tw-jib-css/experimental/corner';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:
The corner-shape property modifies the curve shape — you still need border-radius (rounded-*) to set the corner size.
Named Shapes
Each named shape produces a distinct visual effect:
Superellipse Values
Use numeric values to control the superellipse exponent:
Side and Corner Variants
Apply shapes to specific sides or individual corners:
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 superellipse exponent, which inverts the curve direction:
Negative values work with all directional variants:
Using a custom value
Use the corner-[<value>] syntax to set the corner shape based on a completely custom value:
Using a custom variable
For CSS variables, you can also use the corner-(--custom-property) syntax:
This is just a shorthand for corner-[var(--brand-roundness)] that adds the var() function for you automatically.
Applying conditionally
Hover and focus states
Prefix a corner utility with a state variant like hover:* to only apply it in that state: