A Tailwind CSS plugin that adds "outside" rounded corners to elements, updated to work with TailwindCSS v4.
Similar to folder tabs or protruding cards. The plugin maintains background color/image inheritance while providing a wide range of customization options.
npm install tailwind-rounded-out
If you're looking for a version that works with TailwindCSS v3, check out the
1.0.1
branch. You can install that withnpm install [email protected]
.
Import the plugin in your tailwind css file:
@import "tailwindcss";
@import "tailwind-rounded-out";
note: The plugin uses your --radius-*
theme variables to determine the default literal sizes for each corner.
<!-- All corners -->
<div class="rounded-out-lg">
Basic card with large outer corners
</div>
<!-- Specific sides -->
<div class="rounded-out-b-xl">
Bottom corners only
</div>
<!-- Individual corners -->
<div class="rounded-out-bl-2xl">
Just bottom-left corner
</div>
<!-- Mixed sizes -->
<div class="rounded-out-bl-xl rounded-out-br-sm">
Different sizes for bottom-left and bottom-right
</div>
<!-- Arbitrary values -->
<div class="rounded-out-[25px]">
Custom radius size
</div>
rounded-out-{size}
sm
, md
, lg
, xl
, 2xl
, 3xl
rounded-out-{t|b|l|r}-{size}
- Top, Bottom, Left, Rightrounded-out-{tl|tr|bl|br}-{size}
- Top-Left, Top-Right, etc.rounded-out-{lt|lb|rt|rb}-{size}
- Left-Top, Left-Bottom, etc.rounded-out-{size}
- e.g. rounded-out-[25px]
rounded-out-{direction}-{size}
- e.g. rounded-out-t-[25px]
This plugin uses CSS ::before
and ::after
pseudo-elements to create the rounded corner effect with a CSS Mask, and so it can let the real background show through. The pseudo-elements are positioned absolutely and use CSS masks to create the rounded shape so there's no need for a fake background color.
Pseudo-element Usage: Because this plugin uses ::before
and ::after
pseudo-elements, you cannot apply additional ::before
or ::after
styles to elements using these classes. You can, however, use :hover
, :focus
, etc to toggle the corners on and off.
Position Context: Elements using these classes should have position: relative
or any other position that creates a containing block.
Background Inheritance: The rounded corners will automatically inherit background colors, images, and gradients from the parent element.
<nav class="flex gap-px text-slate-600">
<a class="relative rounded-out-b-xl bg-blue-300 px-4 py-2 rounded-t-xl">
Inactive Tab
</a>
<a class="relative rounded-out-b-xl bg-blue-500 px-4 py-2 rounded-t-xl z-10 text-slate-200">
Active Tab
</a>
</nav>
<div class="relative min-h-[200px] rounded-out-tl-2xl rounded-out-br-2xl bg-gradient-to-br from-blue-500 to-purple-500 p-8 rounded-tr-xl rounded-bl-xl before:bg-blue-500 before:bg-none after:bg-purple-500 after:bg-none">
Card with diagonal gradient corners
</div>
Backgrounds Not Showing
position: relative
or any other position that creates a containing blockConflicts with Other Styles
Overflow notes
MIT License - See LICENSE file for details
Visit the demo page for more examples.