Tailwind CSS plugin that adds first-class utilities for the CSS corner-shape property and its per-corner longhands (e.g. corner-top-left-shape). It supports static keywords like round, scoop, bevel, notch, square, squircle, as well as the functional value superellipse(<value>).

Installation

You can install the plugin via npm:

npm install @toolwind/corner-shape # or pnpm, yarn, bun

/* globals.css */
@import "tailwindcss";
@plugin "@toolwind/corner-shape";

// tailwind.config.js
import cornerShape from '@toolwind/corner-shape';

export default {
  // ...
  plugins: [cornerShape]
}

// tailwind.config.cjs
module.exports = {
  // ...
  plugins: [
    require('@toolwind/corner-shape'),
  ]
}

How it works

This plugin leverages the new CSS corner-shape property, which allows you to control the shape of element corners using both standard keywords as well as functional values.

Because this property is not yet supported in all browsers, consider it forward-looking, though it is safe to use as it degrades gracefully. The utilities generated by this plugin map directly to the corner-shape property and its per-corner longhands.

For example:

<div class="corner-squircle">…</div>

.corner-squircle {
  corner-shape: squircle;
}

View this example on Tailwind Play

Usage

• All corners at once: corner-{shape}
• Physical edges (two corners at a time):
  • corner-t-{shape} → top-left and top-right
  • corner-r-{shape} → top-right and bottom-right
  • corner-b-{shape} → bottom-right and bottom-left
  • corner-l-{shape} → top-left and bottom-left
• Physical single corners:
  • corner-tl-{shape}, corner-tr-{shape}, corner-br-{shape}, corner-bl-{shape}
• Logical edges (writing-direction aware):
  • corner-s-{shape} → start-start and end-start
  • corner-e-{shape} → start-end and end-end
• Logical single corners:
  • corner-ss-{shape}, corner-se-{shape}, corner-ee-{shape}, corner-es-{shape}

Supported static shapes: round, scoop, bevel, notch, square, squircle

<div class="
  corner-squircle
  md:corner-t-bevel
  lg:corner-tr-notch
">
</div>

Functional value: superellipse

Use Tailwind’s modifier syntax (/) to pass a superellipse(<value>) parameter:

• .corner-superellipse/50
• .corner-t-superellipse/32
• .corner-tr-superellipse/e
• .corner-s-superellipse/-pi

Accepted values are:

• a number (e.g. 2, 0.5, -1)
• one of the constants: e, pi, infinity (optionally negative: -e, -pi, -infinity)

Examples:

<div class="corner-superellipse/1.5"></div>
<div class="corner-br-superellipse/pi"></div>
<div class="corner-e-superellipse/-infinity"></div>

Notes:

• Values are passed through as-is to superellipse(<value>). Do not include units.
• Logical shorthands (s, e, ss, se, ee, es) adapt with writing direction.

Keyword equivalents

| Keyword | Description | Equivalent | |----------|-----------------------------------------------------------------------------|------------| | bevel | Defines a straight, diagonal corner, which is neither convex nor concave. | superellipse(0) | | notch | Defines a 90-degree concave square corner. | superellipse(-infinity) | | round | Defines a convex ordinary ellipse; the standard rounded corner created by border-radius without corner-shape. This is the default (initial) value. | superellipse(1) | | scoop | Defines a concave ordinary ellipse. | superellipse(-1) | | square | Defines a 90-degree convex square corner; the default shape when no border-radius (or border-radius: 0) is applied. | superellipse(infinity) | | squircle | Defines a “squircle”, a convex curve in between round and square. | superellipse(2) |

Complete utility reference

• All corners
  • corner-{shape}
  • corner-superellipse/{value}
• Edges (physical)
  • corner-{t|r|b|l}-{shape}
  • corner-{t|r|b|l}-superellipse/{value}
• Corners (physical)
  • corner-{tl|tr|br|bl}-{shape}
  • corner-{tl|tr|br|bl}-superellipse/{value}
• Edges (logical)
  • corner-s-{shape}, corner-e-{shape}
  • corner-{s|e}-superellipse/{value}
• Corners (logical)
  • corner-{ss|se|ee|es}-{shape}
  • corner-{ss|se|ee|es}-superellipse/{value}

Where {shape} is one of round, scoop, bevel, notch, square, squircle.

Variants and composition

All standard Tailwind variants work:

<button class="hover:corner-s-squircle focus:corner-br-bevel"></button>

Browser support

This plugin emits the corner-shape and corner-*-shape properties. Support for these properties varies by browser and may change over time. Consider providing design fallbacks (e.g. border-radius) where necessary.

Learn more

• MDN: corner-shape
• Understanding CSS corner-shape and the power of the superellipse

I hope you find @toolwind/corner-shape a valuable addition to your projects. If you have any issues or suggestions, don't hesitate to open an issue or pull request.

If you liked this, you might also like my other Tailwind CSS plugins:

• tailwindcss-multi: Group utilities together by variant
• tailwindcss-signals: Apply styles based on parent or ancestor state, a state-driven alterative to groups
• tailwindcss-members: Apply styles based on child or descendant state, the inverse of groups
• tailwindcss-mixins: Construct reusable & aliased sets of utilities inline
• tailwindcss-selector-patterns: Dynamic CSS selector patterns
• tailwindcss-js: Effortless build-time JS script injection
• tailwindcss-directional-shadows: Supercharge your shadow utilities with added directional support (includes directional shadow-border utilities too)
• tailwindcss-default-shades: Default shades for simpler color utility classes
• tailwind-lerp-colors: Expand your color horizons and take the fuss out of generating new—or expanding existing—color palettes