tailwind-super-corners

Tailwind CSS v4 plugin with three corner utilities:

• Concentric — auto-calculated inner border-radius for nested elements
• Outer corners — inverse (concave) rounded corners via pseudo-elements
• Corner shape — CSS corner-shape property (squircle, superellipse, etc.)

Install

bun add tailwind-super-corners

/* globals.css */
@import "tailwind-super-corners";

tailwind-merge

If you use tailwind-merge, the package exports a plugin that registers all sc-* class groups automatically:

import { withSuperCorners } from "tailwind-super-corners"
import { extendTailwindMerge } from "tailwind-merge"

const twMerge = extendTailwindMerge(withSuperCorners)

This ensures sc-concentric classes conflict correctly with rounded-*, shape keywords override each other, etc.

---

1. Concentric borders (sc-concentric)

Automatically computes inner_radius = outer_radius - gap for nested elements. Supports unlimited nesting depth via CSS container style queries with even/odd parity toggle.

How it works

1. Parent uses standard Tailwind rounded-* and p-* classes — the plugin shadows these to also set --sc-radius and --sc-gap.
2. Child uses sc-concentric to read the propagated values and apply the correct inner radius.
3. Each nesting level accumulates the subtraction automatically.

Publisher classes (parent)

These shadow core Tailwind utilities. You don't need special classes — just use normal rounded-* and p-*:

Class	Sets
rounded-{token}	border-radius + --sc-radius
rounded-t-{token}	top corners + --sc-radius
rounded-r-{token}	right corners + --sc-radius
rounded-b-{token}	bottom corners + --sc-radius
rounded-l-{token}	left corners + --sc-radius
p-{token}	padding + --sc-gap
px-{token}	padding-inline + --sc-gap
py-{token}	padding-block + --sc-gap
pt-{token}	padding-top + --sc-gap
pb-{token}	padding-bottom + --sc-gap
ps-{token}	padding-inline-start + --sc-gap
pe-{token}	padding-inline-end + --sc-gap

Consumer classes (child)

Class	Corners affected	Fallback
sc-concentric	all	inherit
sc-concentric-{token}	all	{token} value
sc-t-concentric[-{token}]	top-left, top-right
sc-r-concentric[-{token}]	top-right, bottom-right
sc-b-concentric[-{token}]	bottom-right, bottom-left
sc-l-concentric[-{token}]	top-left, bottom-left
sc-tl-concentric[-{token}]	top-left
sc-tr-concentric[-{token}]	top-right
sc-bl-concentric[-{token}]	bottom-left
sc-br-concentric[-{token}]	bottom-right

The {token} is any borderRadius theme value (e.g. lg, xl, 3xl). When omitted, falls back to inherit.

Example

<!-- Parent: 3xl radius, 4 padding -->
<div class="rounded-3xl p-4 bg-gray-100">
  <!-- Child: auto-calculated radius (3xl - 4 = concentric) -->
  <div class="sc-concentric bg-white">
    <!-- Grandchild: works at any depth -->
    <div class="p-2">
      <div class="sc-concentric bg-gray-50">...</div>
    </div>
  </div>
</div>

With explicit fallback

<!-- If no parent propagates, falls back to rounded-lg -->
<div class="sc-concentric-lg bg-white">...</div>

---

2. Outer corners (sc-out)

Creates inverse (concave) rounded corners using ::before and ::after pseudo-elements. The element must be position: relative for correct placement.

Automatically upgrades to native corner-shape: superellipse() with negative values when supported.

All-corners variants

Class	Description
sc-out	Both bottom corners, default radius
sc-out-{size}	Both bottom corners, custom radius

Side variants (two corners)

Class	Corners	Pseudo-elements
sc-out-t[-{size}]	top-left + top-right	::before + ::after
sc-out-b[-{size}]	bottom-left + bottom-right	::before + ::after
sc-out-l[-{size}]	left-top + left-bottom	::before + ::after
sc-out-r[-{size}]	right-top + right-bottom	::before + ::after

Individual corner variants

Class	Corner	Pseudo-element
sc-out-tl[-{size}]	top-left	::before
sc-out-tr[-{size}]	top-right	::after
sc-out-bl[-{size}]	bottom-left	::before
sc-out-br[-{size}]	bottom-right	::after
sc-out-lt[-{size}]	left-top	::before
sc-out-lb[-{size}]	left-bottom	::after
sc-out-rt[-{size}]	right-top	::before
sc-out-rb[-{size}]	right-bottom	::after

Note on naming: sc-out-bl = bottom-left (horizontal edge), sc-out-lb = left-bottom (vertical edge). The first letter indicates the edge, the second indicates which end of that edge.

Sizing

• Without suffix: uses --sc-out-radius-base (default 1rem)
• With suffix: accepts any length (sc-out-2xl, sc-out-[12px]) or --radius-* theme tokens

Example

<!-- Tab-like element with outer corners at the bottom -->
<div class="relative bg-blue-500 sc-out">
  Tab content
</div>

<!-- Custom size -->
<div class="relative bg-blue-500 sc-out-xl">
  Tab content
</div>

<!-- Only bottom-left corner -->
<div class="relative bg-blue-500 sc-out-bl">
  Tab content
</div>

Requirements

• The element needs position: relative (add relative class)
• The element needs a background (bg-*), as pseudo-elements inherit it
• Pseudo-elements are positioned absolutely outside the element bounds — ensure the parent has overflow: visible (default)

---

3. Corner shape (sc-{shape})

Sets the CSS corner-shape property on individual or grouped corners.

Static keywords

Class prefix	CSS output	--corner-superellipse
sc-round	corner-shape: round	1
sc-scoop	corner-shape: scoop	-1
sc-bevel	corner-shape: bevel	0
sc-notch	corner-shape: notch	-infinity
sc-square	corner-shape: square	infinity
sc-squircle	corner-shape: squircle	2
sc-smooth	corner-shape: superellipse(1.6)	1.6

Superellipse with custom exponent

Use sc-superellipse/{value} for arbitrary superellipse values:

<div class="rounded-xl sc-superellipse/2">...</div>   <!-- squircle -->
<div class="rounded-xl sc-superellipse/1.6">...</div>  <!-- smooth -->
<div class="rounded-xl sc-superellipse/4">...</div>    <!-- more squared -->

Accepts numbers, e, pi, infinity, and their negatives.

Per-corner and per-side

All shape classes support side/corner prefixes:

Prefix	Corners affected
sc-	all corners
sc-t-	top-left + top-right
sc-r-	top-right + bottom-right
sc-b-	bottom-right + bottom-left
sc-l-	top-left + bottom-left
sc-s-	start-start + end-start (logical)
sc-e-	start-end + end-end (logical)
sc-tl-	top-left
sc-tr-	top-right
sc-br-	bottom-right
sc-bl-	bottom-left
sc-ss-	start-start (logical)
sc-se-	start-end (logical)
sc-ee-	end-end (logical)
sc-es-	end-start (logical)

Examples

<!-- Squircle all corners -->
<div class="rounded-2xl sc-squircle">...</div>

<!-- Smooth top, bevel bottom -->
<div class="rounded-2xl sc-t-smooth sc-b-bevel">...</div>

<!-- Custom superellipse on one corner -->
<div class="rounded-2xl sc-tl-superellipse/3">...</div>

<!-- Notch only bottom-right -->
<div class="rounded-xl sc-br-notch">...</div>

Browser support

corner-shape is a new CSS property. Currently supported in Chrome 138+ behind a flag. The --corner-superellipse custom property is always set for use by other utilities (like sc-out's progressive enhancement).

---

Combined usage

All three features compose together:

<!-- Outer card with squircle shape + concentric inner card -->
<div class="rounded-3xl p-6 bg-gray-100 sc-squircle">
  <div class="sc-concentric bg-white p-4">
    <div class="sc-concentric bg-gray-50">
      Unlimited nesting, auto-calculated radius
    </div>
  </div>
</div>

<!-- Tab bar with outer corners and smooth shape -->
<div class="relative bg-white rounded-t-xl sc-out-bl sc-out-br sc-smooth">
  Active tab
</div>

CSS custom properties

Variable	Set by	Description
--sc-radius	rounded-* publishers	Propagated border-radius value
--sc-gap	p-* publishers	Propagated padding/gap value
--sc-odd / --sc-even	Parity system	Accumulated radius at each depth
--_sc-parity	Parity system	Current parity (odd / even)
--_sc-active	rounded-* publishers	Marks element as concentric root
--sc-out-radius-base	Theme	Default outer corner radius (1rem)
--sc-out-mask	Theme	Radial gradient mask for outer corners
--corner-superellipse	sc-{shape}	Superellipse exponent for progressive enhancement

License

MIT