Rounded-Out Tailwindcss Utility Demo
For the tailwind-rounded-out plugin.
Here's a bunch of demos to show off the various features of the rounded-out
utility.
Default Rounded Out
Notice that only the bottom corners are rounded out? This is because there's only two psuedo elements available to create the corners. And we assume that the default use-case is to round out the bottom corners.
Nesting
If you want to round out all sides, you can nest the element
rounded-out-lg
inside another rounded-out-lg
element:
<div class="rounded-out-lg">
<div class="rounded-out-lg">
Outer rounded corners!
</div>
</div>
Not sure why you'd want to do this, but it's possible
Or imagine you want it to come in from each side;
<div class="rounded-out-l-2xl">
<div class="rounded-out-r-2xl">
Outer rounded corners!
</div>
</div>
This could be useful for cut-out blockquotes or other UI elements
Top Variants
Bottom Variants
Left Variants
Right Variants
Corner Variants
Combined Examples
Arbitrary Examples
Demonstrating the masking effect
Here the demos show a complex background which demonstrates that the corners are not using a fake solid color background, but rather a mask which cuts out the corners. So you may use any background you want behind the element!
Mesh Gradient Examples - Light 1
Mesh Gradient Examples - Dark 1
Mesh Gradient Examples - Light 2
Mesh Gradient Examples - Dark 2
Mesh Gradient Examples - Light 3
Mesh Gradient Examples - Dark 3
Creative Combinations
Mixed Corners
<div class="bg-violet-700 relative rounded-out-tl-4xl rounded-out-lb-4xl">
<div class="bg-inherit rounded-out-rt-4xl rounded-out-br-4xl">
Shuriken!
</div>
</div>
Note: When nesting corners of different shapes, like above, the ordering of the classes
becomes more important. As some of the corners will try to re-use the :before
or :after
pseudo-elements
So it may be simpler to use 4 nested divs as shown below.
Different Sizes
<div class="bg-sky-500 relative rounded-out-tl-[100px]">
<div class="bg-inherit rounded-out-lb-[50px]">
<div class="bg-inherit rounded-out-rt-[80px]">
<div class="bg-inherit p-4 rounded-out-br-[30px]">
Crazy town!
</div>
</div>
</div>
</div>
Practical Example
Here's a practical example of how you can use the corners to create a tab-like navigation.
Tab-like Navigation
This is the content for the first tab. It's currently active.