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

Then, include it in your tailwind.config.js:

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

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-round
  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

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