🚀 Tailwind CSS Corner Shape Plugin 
A modern Tailwind CSS plugin that automatically applies the new CSS corner-shape property to all rounded utilities, giving your app a contemporary iOS-like aesthetic.
✨ Features - 🎨 Auto-applies corner-shape to all rounded-* utilitiesFully configurable via Tailwind themeZero config by default - works out of the boxArbitrary values support (e.g., rounded-[20px])Progressive enhancement - graceful fallback for unsupported browsersTypeScript support with full type definitionsLightweight - no runtime dependencies
🌐 Browser Support | Browser | Version | Status |
Note: Browsers that don't support corner-shape will gracefully fall back to standard border-radius.
📦 Installation ``bashor or `
🎯 Tailwind CSS v3 & v4 Support This plugin works with both Tailwind CSS v3 and v4 . Choose the setup that matches your Tailwind version:
$3 Use the @plugin directive in your CSS file:
`css app/globals.css or styles/app.css /`
Available presets for v4: - iOS-style (default)very-rounded - Soft, highly roundedmoderately-rounded - Balanced modernslightly-rounded - Subtle smoothround - Perfect circlesbevel - Industrial chamfer
Custom configuration for v4:
Create a wrapper file for custom options:
`javascript
export default cornerShapePlugin({
Then load it:css`
$3 Add the plugin to your tailwind.config.js:
`js
export default {
Or use named preset exports:
`js
export default {
---
That's it! All your existing rounded-* classes now have modern corner shapes - NO CODE CHANGES NEEDED :
`tsx {/
✨ Auto has corner-shape! /}
{/ ✨ Auto has corner-shape! /} {/
✨ Auto has corner-shape! /}
`
The plugin automatically reads your existing
borderRadius
theme values, so it works with any custom radius you've defined!
⚙️ Configuration (Optional)
$3 Want to use a different corner shape? Use any CSS corner-shape keyword:
`
js`
Or use a custom superellipse value:
`
js`
$3 Need more control? All options available:
`
js // Different shapes for specific sizes
// Exclude specific classes from getting corner-shape
// Add !important to corner-shape declarations (for conflicting styles)
// Disable the plugin entirely
`
$3 | Option | Type | Default | Description |
default
| string
| 'squircle'
| Default corner-shape for all rounded-* classes (keyword or superellipse) |variants
| object
| {}
| Override corner-shape for specific sizes (e.g., { full: 'notch' }
) |exclude
| string[]
| []
| Exclude classes from corner-shape (e.g., ['rounded-full']
) |important
| boolean
| false
| Add !important
to all corner-shape declarations |enabled
| boolean
| true
| Enable/disable the entire plugin |
$3 CSS Keywords (recommended for simplicity):
| Keyword | Equivalent | Look | Best For |
'square'
| superellipse(infinity)
| Square corners | Remove border-radius effect |'squircle'
| superellipse(2)
| iOS squircle (default) | Modern apps, iOS design |'round'
| superellipse(1)
| Perfect round | Standard border-radius look |'bevel'
| superellipse(0)
| Straight chamfer | Industrial, technical UI |'scoop'
| superellipse(-1)
| Concave corners | Depth effects, insets |'notch'
| superellipse(-infinity)
| Deep notch | Special effects |Custom Superellipse Values :
| Value | Look | Best For |
superellipse(3)
| Almost square | High-tech UI |superellipse(1.5)
| Balanced modern | Contemporary design |superellipse(1.4)
| Slightly rounded | General purpose |superellipse(0.5)
| Soft bevel | Subtle chamfer |superellipse(-1.5)
| Deep scoop | Pronounced concave |
🎨 Usage Examples
$3 Write
rounded-*
like you always did - corner-shape is applied automatically:
`
tsx Modern cards - just use rounded-xl! /}
Beautiful Card {/ Buttons - just use rounded-full! /}
{/ Avatars - just use rounded-full! /}
{/ Custom sizes - just use rounded-[20px]! /}
`
No
corner-
utilities needed - just your regular rounded- classes with automatic modern styling! 🎯
🎯 Real-World Examples
$3
`
tsx
`
$3 Configure the plugin to use squircle for rounded-full:
`
js`
Then just use regular rounded-full:
`
tsx`
$3 Configure scoop as default or for specific sizes:
`
js`
`
tsx
`
$3
`
js`
`
tsx
`
🎭 Design Patterns
$3
`
tsx
`
$3 Configure scoop for a specific size to add depth:
`
js`
`
tsx
`
$3
`
tsx
`
🔍 How It Works The plugin leverages Tailwind's
addUtilities
and matchUtilities
APIs to:1. Override all
rounded-*
classes to include corner-shape
Support arbitrary values like rounded-[20px]
Read your existing borderRadius
theme configurationProvide graceful fallback for unsupported browsersGenerated CSS example:
`
css or your configured value /.rounded-[20px] {
`
🚫 Disabling the Plugin To disable corner-shape:
`
js``
Or remove the plugin entirely from your config.
📊 Performance - ✅ No runtime cost - pure CSSNo JavaScript required - static utility classesTree-shakeable - unused utilities are purgedGPU-accelerated - hardware accelerated like border-radius
🤝 Contributing Contributions are welcome! This plugin is designed to be:
- Type-safe - Full TypeScript supportWell-documented - Comprehensive inline docsTested - Works with all Tailwind versions 3.x+Maintainable - Clean, readable code
📄 License MIT © Bilal Harouchi
🔗 Resources - MDN: corner-shape CSS Borders and Box Decorations Module Level 4 Tailwind CSS Plugin Documentation
💡 Credits Inspired by Apple's iOS design system and the modern web platform's evolving capabilities.
---
Made with ❤️ by the community