tailwindcss-concentric weekly downloads statistics

tailwindcss-concentric

Nested rounded corners that line up, for Tailwind CSS v4. Give a child rounded-concentric and its radius follows its rounded parent:

inner radius = outer radius - gap        (gap = the distance between the two edges)

The gap is the parent's padding and border width, plus the padding and border of a wrapper in between and the child's own margin. For absolute and fixed children it is the inset plus the parent's border width. The value is computed in CSS from the Tailwind classes you already wrote. No JavaScript, no config, and it keeps working when the parent's radius or padding changes, across breakpoints and states.

<div class="rounded-3xl bg-white p-3">
  <img class="rounded-concentric" src="..." alt="" />   <!-- 24px - 12px = 12px -->
</div>

Install

npm install tailwindcss-concentric

Import it right after Tailwind in your main CSS file:

@import "tailwindcss";
@import "tailwindcss-concentric";

Requires Tailwind CSS 4.0 or later. CI runs the browser suite against 4.0.0 and the latest release every week.

Classes

Class	Effect
rounded-concentric	All four corners follow the nearest rounded ancestor.
rounded-{t,r,b,l}-concentric	Two corners on one side, e.g. rounded-t-concentric for media flush with the top of a card.
rounded-{s,e}-concentric	Start or end corners; they flip under dir="rtl".
rounded-{tl,tr,br,bl}-concentric	One physical corner.
rounded-{ss,se,ee,es}-concentric	One logical corner.
rounded-concentric-{n} / rounded-concentric-[6px] / rounded-concentric-(--gap)	Explicit gap instead of the measured one, for spacing the plugin cannot read (see What the plugin reads). {n} uses the spacing scale.
concentric-elliptical	Per-axis radii when the parent's padding differs per axis (see below).
concentric-squircle	corner-shape: squircle with a matching gap (see below).

All of them work with variants (md:rounded-concentric, hover:rounded-t-concentric) and combine with plain radius classes on the same element, following the normal cascade: rounded-xl rounded-t-concentric gives concentric top corners and rounded-xl bottom corners.

Chains

Concentric elements pass their own radius and padding on, so nesting works at any of the levels you would realistically build (nine stacked rounded elements are exact):

<div class="rounded-3xl p-2">              <!-- 24px -->
  <div class="rounded-concentric p-2">     <!-- 16px -->
    <div class="rounded-concentric p-1">   <!-- 8px -->
      <div class="rounded-concentric"></div>   <!-- 4px -->
    </div>
  </div>
</div>

A plain rounded-* element in the middle starts a new chain from its own radius.

Wrappers, margins and positioned elements

A wrapper without a radius passes its padding and border on, so layout divs between a card and its content need nothing. The child's own margin counts too, and a negative margin makes the radius larger, for media that bleeds to the card's edge:

<div class="rounded-3xl p-2">              <!-- 24px -->
  <div class="flex flex-col gap-2 p-2">    <!-- plain wrapper -->
    <div class="rounded-concentric"></div>   <!-- 24 - 8 - 8 = 8px -->
  </div>
</div>

<div class="rounded-3xl p-4">
  <img class="-mx-4 -mt-4 rounded-t-concentric" />   <!-- 24px, flush with the card -->
</div>

absolute and fixed elements are measured by their insets from the parent's padding edge, so rings and overlays need nothing either: absolute inset-1 inside a relative rounded-2xl border p-4 card is 16 - 1 - 4 = 11px.

Unequal padding

With px-4 py-2 the gap differs per axis. By default each corner uses the smaller gap and stays circular (24 - 8 = 16px). Add concentric-elliptical to subtract each axis' own gap instead (8px / 16px), which keeps the curve exactly parallel.

Minimum radius

Deep nesting or a large gap clamps the radius to 0. Set a floor on any ancestor:

<body class="[--concentric-floor:2px]">

Pills

Children of rounded-full parents stay pills.

Squircles

With corner-shape: squircle, subtracting the gap once leaves the inner corner too round. Put concentric-squircle on the child: it sets corner-shape: squircle and scales the gap by 1.84, which keeps the gap even at the edges and the diagonal, and within 3% in between. Give the parent concentric-squircle (or [corner-shape:squircle]) as well. Browsers without corner-shape ignore both and keep round corners with the plain gap.

tailwind-merge

If you merge classes with tailwind-merge (for example in a cn() helper), register the plugin's classes so they replace radius classes instead of sitting next to them:

import { extendTailwindMerge } from "tailwind-merge";
import { withConcentric } from "tailwindcss-concentric/merge";

export const twMerge = extendTailwindMerge(withConcentric);
// with your own config: extendTailwindMerge({ ...yourConfig }, withConcentric)

Without this, twMerge("rounded-lg", "rounded-concentric") keeps both and rounded-lg wins.

What the plugin reads…