Tailwind Rounded Out Plugin Examples

Download This Plugin Back To jQueryScript

Add outside rounded corners to Tailwind CSS elements with ease using Tailwind Rounded Out plugin.

Default Rounded Out

Default
Small (sm)
Medium (md)
Large (lg)
Extra Large (xl)
2XL
3XL

Notice that only the bottom corners are rounded out, this is because there's only two psuedo elements available to create the corners. 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>
Outer rounded corners!
Not sure why you'd want to do this, but it's possible

Top Variants

Top Small
Top Medium
Top Large
Top XL
Top 2XL
Top 3XL

Bottom Variants

Bottom Small
Bottom Medium
Bottom Large
Bottom XL
Bottom 2XL
Bottom 3XL

Left Variants

Left Small
Left Medium
Left Large
Left XL
Left 2XL
Left 3XL

Right Variants

Right Small
Right Medium
Right Large
Right XL
Right 2XL
Right 3XL

Corner Variants

Top Left Small
Top Right Medium
Bottom Left Large
Bottom Right XL
Left Top 2XL
Left Bottom 3XL
Right Top XL
Right Bottom 2XL

Combined Examples

Top XL + Bottom Small
Left 2XL + Right Medium
Top Left 3XL + Bottom Right Large

Arbitrary Examples

Arbitrary Size 23px
Top Arbitrary Size 29px
Left Top, Right Bottom Arbitrary Size 1em

Mesh Gradient Examples - Light 1

Full Rounded Out 3XL
Top Rounded Out 2XL

Mesh Gradient Examples - Dark 1

Bottom Rounded Out 3XL
Top 2XL + Bottom XL

Mesh Gradient Examples - Light 2

Left Rounded Out 3XL
Right Rounded Out 2XL

Mesh Gradient Examples - Dark 2

Top-Left + Bottom-Right 3XL
Top-Right + Bottom-Left 2XL

Mesh Gradient Examples - Light 3

Left-Top + Right-Bottom 3XL
Right-Top + Left-Bottom 2XL

Mesh Gradient Examples - Dark 3

Top 3XL + Bottom Small
Left 2XL + Right Large

Creative Combinations

Mixed Corners
All Sides Different

Tab-like Navigation

Card with Mixed Corners

Card with diagonal corners