Tailwind CSS Plugin: corner-shape for Modern Corners

The Tailwind CSS plugin @toolwind/corner-shape brings the cutting-edge CSS corner-shape property to your projects, enabling squircle, bevel, and superellipse corners with simple utilities. This lightweight plugin from Toolwind enhances Tailwind CSS ≥ v4.0+ by generating classes like corner-squircle or corner-tr-notch, perfect for iOS-inspired designs that degrade gracefully in unsupported browsers. Developers love its 123 GitHub stars for streamlining advanced corner styling without custom CSS.​

Quick Installation

Install via npm: npm install @toolwind/corner-shape. For Tailwind v4+, add to globals.css: @import "tailwindcss"; @plugin "@toolwind/corner-shape";. Older versions use tailwind.config.js with plugins: [cornerShape()].​

Adding the Corner Shape Tailwind CSS plugin is a breeze. Follow these steps:

1. Install via npm:textnpm install corner-shape
2. Add to tailwind.config.js:JavaScriptmodule.exports = { plugins: [ require('corner-shape'), ], }
3. Rebuild your CSS: Run npx tailwindcss -i ./src/input.css -o ./dist/output.css –watch to generate utilities.

Key Features

• Static shapes: round, scoop, bevel, notch, square, squircle for all corners (corner-{shape}) or specifics like corner-tl-bevel.​
• Superellipse support: corner-superellipse/2 or corner-br-superellipse/pi for custom curves.​
• Logical & responsive: Writing-direction aware (corner-s-squircle) with variants like hover:corner-notch.​

Example: <div class="corner-squircle md:corner-tr-notch">Content</div> creates dynamic, modern edges.​

Why Choose This Tailwind CSS Plugin?

Unlike basic rounded-*, this Tailwind CSS plugin unlocks CSS corner-shape for scoop/notch effects, boosting UI modernity. check out the open-source PRISM template—enhance its academic portfolio components with these corner utilities for a truly unique edge.. Check the repo: github.com/toolwind/corner-shape.