Tailwind Rounded Out (v2)

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.

Features

- 🖼 Maintains background inheritance (colors, gradients, images)
- 🔀 Supports all corners and sides independently
- 🟣 Works with Tailwind's default radius sizes
- 🎨 Supports arbitrary values
- 📦 Zero dependencies besides Tailwind CSS

Installation

``bash
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 with npm install tailwind-rounded-out@1.0.1.

Setup

Import the plugin in your tailwind css file:

`css
@import "tailwindcss";
@import "tailwind-rounded-out";
`
note: The plugin uses your --radius-* theme variables to determine the default literal sizes for each corner.

Basic Usage

`html
















`

$3

Available Classes

$3

- rounded-out-{size}
- Sizes: sm, md, lg, xl, 2xl, 3xl

$3

- rounded-out-{t|b|l|r}-{size} - Top, Bottom, Left, Right
- rounded-out-{tl|tr|bl|br}-{size} - Top-Left, Top-Right, etc.
- rounded-out-{lt|lb|rt|rb}-{size} - Left-Top, Left-Bottom, etc.

$3

- rounded-out-{size} - e.g. rounded-out-[25px]
- rounded-out-{direction}-{size} - e.g. rounded-out-t-[25px]

How It Works

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.

$3

1. 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.

2. Position Context: Elements using these classes should have position: relative or any other position that creates a containing block.

3. Background Inheritance: The rounded corners will automatically inherit background colors, images, and gradients from the parent element.

Examples

$3

`html



`

#### Produces;

$3

`html



`

#### Produces;

Troubleshooting

$3

1. Backgrounds Not Showing

- Ensure the parent element has a background color/image set
- The element this is applied to needs to have position: relative` or any other position that creates a containing block

2. Conflicts with Other Styles

- Remove any ::before or ::after pseudo-elements on the same element
- Check z-index values if elements appear in wrong order

3. Overflow notes
- The corners are _outside_ of the bounding box
- Setting an overflow hidden will prevent the pseudo-elements from showing

License

MIT License - See LICENSE file for details

More Examples

Visit the demo page for more examples.

#### Backgrounds are able to show through, no fake backgrounds.

#### A range of corner variations