Tailwind CSS v4Default: superellipse(2)Progressive fallback

Smooth corners without rewriting your design system.

Tailwind rounded utilities, upgraded with calmer geometry.

Drop in one plugin and your existing rounded surfaces render with smoother superellipse corners. The default profile is superellipse(2), and unsupported browsers keep plain border radius with no extra work.

Open playground

Install command lines live in the package dropdown.

Keep shipping the same markup. Add named corner profiles only when a surface needs a more editorial silhouette.

Softer surfaces by default

Buttons, cards, and media frames stop feeling inflated at larger radii and settle into a calmer silhouette.

Theme-wide or one-off control

Pick a repo-wide default, add named tokens, or sharpen a single component when the composition needs more tension.

Fallback stays invisible

Unsupported browsers keep plain border radius so layouts still read correctly even without corner-shape.

Quick start

Install the package, keep the markup, let the corners settle in.

Pick your package manager, drop the plugin into your Tailwind entrypoint, and keep using the same rounded utilities you already ship.

/* app/globals.css */

@import "tailwindcss";

@plugin "tailwindcss-smooth-corners";

@plugin "tailwindcss-smooth-corners" {

default: 2.8;

}

Install

Add the package and point Tailwind at the plugin from your CSS-first entrypoint.

@plugin "tailwindcss-smooth-corners";

Set defaults

Choose a repo-wide starting profile so every rounded surface inherits the same tension.

default: 2.8;

Override locally

Use named tokens or arbitrary values when one component needs a different silhouette.

corner-shape-[superellipse(3.4)]

Fallback behavior

Unsupported browsers keep plain rounded corners behind an automatic supports gate.

@supports (corner-shape: round)

Beginner docs

Read this once, ship it once, keep using the same rounded classes.

This page is designed so a beginner can go from zero setup to a working result without leaving the home page. Start with installation, verify the first result, then move on to defaults and overrides only if you need them.

Install the package

Start with your package manager of choice. You only need the plugin package itself.

Add the plugin to your CSS

In Tailwind v4, plugin setup usually happens in the same CSS entrypoint where you import Tailwind.

Keep using rounded utilities

You do not need new markup for the default behavior. Existing `rounded-*` utilities are upgraded automatically.

Verify the fallback behavior

Browsers that support `corner-shape` show the smoother geometry. Others keep normal `border-radius`.

Getting started

Install the plugin

If you are just trying it for the first time, pick one package manager command below, install the package, and then move to your Tailwind CSS entry file.

npm install tailwindcss-smooth-corners
pnpm add tailwindcss-smooth-corners
yarn add tailwindcss-smooth-corners
bun add tailwindcss-smooth-corners

Setup

Add it to your Tailwind CSS entrypoint

For Tailwind v4, import Tailwind and then declare the plugin. This is enough to enable the default behavior.

/* app/globals.css */
@import "tailwindcss";
@plugin "tailwindcss-smooth-corners";

First result

Use your existing rounded utilities

The beginner-friendly mental model is simple: keep writing `rounded-*` and let the plugin enhance those corners automatically.

<div class="rounded-3xl bg-card p-6">
  This already gets smooth corners where supported
</div>

Configuration

Set a repo-wide default

The plugin starts at `superellipse(2)` by default. If you want all rounded surfaces to feel a little softer or a little sharper, set a new default value in the plugin block.

@plugin "tailwindcss-smooth-corners" {
  default: 2.8;
}

Overrides

Use one-off or named overrides

Once the default is in place, only override a surface when you need a more specific silhouette for that component.

<div class="rounded-[28px] corner-shape-[superellipse(3.2)]">
  Sharper one-off override
</div>

<div class="rounded-[28px] corner-shape-soft">
  Named token override
</div>

What you get automatically

The plugin is intentionally small in scope. It upgrades what you already use instead of asking you to learn a new styling workflow on day one.

Existing rounded utilities keep working

A `rounded-3xl` or `rounded-[28px]` surface still reads like a normal Tailwind surface, just with smoother geometry where supported.

Unsupported browsers still look correct

If the browser does not support `corner-shape`, users still see plain rounded corners instead of a broken layout.

You can stay at the default level

Beginners do not need tokens or overrides immediately. The out-of-the-box default is `superellipse(2)`, so you can install, enable, and keep moving until you actually need more control.

Browser fallback, in plain language

The plugin wraps its `corner-shape` output in an `@supports` check, so it only applies the enhanced geometry when the browser understands it.

Supported browser

You see the smoother superellipse corner profile.

Unsupported browser

You still get normal `border-radius`, so the component remains usable and visually correct.

Why this matters

It keeps adoption low-risk for beginners, because the fallback is built in rather than something you have to wire up yourself.

Migration

Hand the migration to an AI agent without rewriting the brief.

This markdown prompt tells an agent to install the package, wire the Tailwind CSS v4 plugin, keep existing rounded utilities, and only reach for overrides when a component actually needs them.

AI agent prompt

Copy this migration brief

Paste this into your agent when you want a project migrated to `tailwindcss-smooth-corners` with the correct install and configuration steps.

# Migration brief for AI agents

Please migrate this project to `tailwindcss-smooth-corners`.

## Install the package

Use one package manager command:

```bash
npm install tailwindcss-smooth-corners
pnpm add tailwindcss-smooth-corners
yarn add tailwindcss-smooth-corners
bun add tailwindcss-smooth-corners
```

## Configure Tailwind CSS v4

In the main Tailwind CSS entry file, keep the Tailwind import and add the plugin:

```css
@import "tailwindcss";
@plugin "tailwindcss-smooth-corners";
```

The default corner profile is `superellipse(2)`.

## Optional repo-wide default

Only add this if the product needs a softer or sharper default than `superellipse(2)`:

```css
@plugin "tailwindcss-smooth-corners" {
  default: 2.8;
}
```

## Usage rules

- Keep existing `rounded-*` utilities in place.
- Do not rewrite components just to adopt the plugin.
- Use `corner-shape-*` utilities only for one-off overrides or named tokens.

```html
<div class="rounded-3xl">Default smooth-corner upgrade</div>
<div class="rounded-[28px] corner-shape-[superellipse(2.6)]">One-off override</div>
<div class="rounded-[28px] corner-shape-soft">Named token override</div>
```

## Fallback behavior

Rely on the built-in progressive enhancement. Browsers without `corner-shape` support should keep plain `border-radius` automatically. Do not add custom fallback code unless the project has a documented browser-specific requirement.

FAQ

Common beginner questions

These are the questions people usually ask before they trust a styling plugin in an existing codebase. The short version: the default path is small, safe, and reversible.

Do I need to replace my existing `rounded-*` classes?

No. That is the main beginner-friendly value of the plugin. Your existing rounded utilities keep working and become smoother where `corner-shape` is supported.

Do I have to configure a default before it works?

No. The default behavior works right after you install the plugin and add the `@plugin` line. Extra configuration is optional.

What happens in browsers that do not support `corner-shape` yet?

They keep plain `border-radius`. Your UI should still look correct; it just will not use the enhanced geometry.

When should I use one-off overrides?

Use them only when a specific surface needs a different feeling than the global default, such as a hero card, floating panel, or editorial tile.

Troubleshooting

If it is not working, check these first

Beginners usually run into one of a few simple setup issues. These checks are ordered from most likely to least likely, so you can debug quickly without guessing.

Quick checks

Run through these before changing config or rewriting classes.

Make sure the plugin line is in the right CSS entry file

If Tailwind is loaded from `app/globals.css`, the `@plugin "tailwindcss-smooth-corners"` line should live there too.

Confirm you are testing a rounded surface

The plugin enhances the `rounded-*` utility family. If the element has no rounded utility, there is nothing for it to upgrade.

Check browser support before assuming setup is broken

A browser without `corner-shape` support will still show plain `border-radius`. That is expected fallback behavior, not a failed install.

Add overrides only after the default path works

If you are debugging setup, start with a plain rounded example first. Tokens and one-off overrides are easier to reason about once the base install is confirmed.

Good debugging habit

Start simple, verify one thing at a time, then add complexity back in.

Begin with this mental model

If the plugin is installed and the element uses a rounded utility, the enhanced corners should appear only in browsers that support `corner-shape`. Everything else is optional configuration.

Then move in this order

Install → CSS plugin line → rounded utility test → default config → overrides. This sequence makes setup issues much easier to isolate.