Toolwind Corner Shape

This plugin provides utilities for the CSS corner-shape property and its per-corner longhands. It allows you to control the shape of element corners using static keywords or the functional superellipse(<value>) value.

Note: Because corner-shape is a newer CSS property, browser support varies. The utilities degrade gracefully, but you should consider providing design fallbacks (like border-radius) where necessary.

Install the plugin via npm, pnpm, yarn, or bun:

npm install @toolwind/corner-shape

Tailwind CSS v4.0.0+

Import the plugin directly in your CSS file using the @plugin directive:

@import "tailwindcss";
@plugin "@toolwind/corner-shape";

Tailwind CSS < v4.0.0

Add the plugin to your tailwind.config.js or tailwind.config.cjs file.

Module JS (ESM):

import cornerShape from '@toolwind/corner-shape';

export default {
  plugins: [cornerShape]
}

Common JS (CJS):

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

The @toolwind/corner-shape plugin provides Tailwind CSS utilities for controlling corner shapes (like round, scoop, bevel, etc.) using both shorthand and longhand syntax. It can be integrated into your Tailwind configuration using the standard plugin API.

Note: The current implementation provides static keyword utilities for various corners. Functional utilities (like superellipse) are present in the source but currently commented out/in development.

import plugin from 'tailwindcss/plugin.js';
import cornerShape from '@toolwind/corner-shape';

export default {
  // ... other config
  plugins: [
    cornerShape,
  ],
};

You can pass a parameter to the superellipse() function using Tailwind's modifier syntax (/). This is useful for fine-grained control over the curve.

Syntax: corner-{target}-superellipse/{value}

Accepted values:

• A number (e.g., 2, 0.5, -1)
• Constants: e, pi, infinity (can be negative, e.g., -pi)

Note: Do not include units in the value.

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

The following table maps the static shape keywords to their mathematical superellipse equivalents:

The plugin generates utilities for applying specific shapes to different corners. The available shapes (keywords) are:

• round
• scoop
• bevel
• notch
• square
• squircle

These can be applied to specific corners using shorthand prefixes or to all corners using the default corner-shape-{keyword} syntax.

<!-- Apply a rounded shape to all corners -->
<div class="corner-shape-round"></div>

<!-- Apply a scoop shape to the top-left corner -->
<div class="corner-tl-scoop"></div>

<!-- Apply a bevel shape to the start-start corner -->
<div class="corner-ss-bevel"></div>

The plugin uses specific shorthand prefixes to target individual corners or groups of corners. Use these prefixes between corner and the shape keyword (e.g., corner-{prefix}-{shape}).