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

rounded-out
rounded-out-sm
rounded-out-md
rounded-out-lg
rounded-out-xl
rounded-out-2xl
rounded-out-3xl

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>
Outer rounded corners!
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>
Attached to the sides!
This could be useful for cut-out blockquotes or other UI elements

Top Variants

rounded-out-t-sm
rounded-out-t-md
rounded-out-t-lg
rounded-out-t-xl
rounded-out-t-2xl
rounded-out-t-3xl

Bottom Variants

rounded-out-b-sm
rounded-out-b-md
rounded-out-b-lg
rounded-out-b-xl
rounded-out-b-2xl
rounded-out-b-3xl

Left Variants

rounded-out-l-sm
rounded-out-l-md
rounded-out-l-lg
rounded-out-l-xl
rounded-out-l-2xl
rounded-out-l-3xl

Right Variants

rounded-out-r-sm
rounded-out-r-md
rounded-out-r-lg
rounded-out-r-xl
rounded-out-r-2xl
rounded-out-r-3xl

Corner Variants

rounded-out-tl-sm
rounded-out-tr-md
rounded-out-bl-lg
rounded-out-br-xl
rounded-out-lt-2xl
rounded-out-lb-3xl
rounded-out-rt-xl
rounded-out-rb-2xl

Combined Examples

rounded-out-t-xl rounded-out-b-sm
rounded-out-l-2xl rounded-out-r-md
rounded-out-tl-3xl rounded-out-br-lg

Arbitrary Examples

rounded-out-[23px]
rounded-out-t-[29px]
rounded-out-lt-[1em] rounded-out-rb-[1em]

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

rounded-out-3xl
rounded-out-t-2xl

Mesh Gradient Examples - Dark 1

rounded-out-b-3xl
rounded-out-t-2xl rounded-out-b-xl

Mesh Gradient Examples - Light 2

rounded-out-l-3xl
rounded-out-r-2xl

Mesh Gradient Examples - Dark 2

rounded-out-tl-3xl rounded-out-br-3xl
rounded-out-tr-2xl rounded-out-bl-2xl

Mesh Gradient Examples - Light 3

rounded-out-lt-3xl rounded-out-rb-3xl
rounded-out-rt-2xl rounded-out-lb-2xl

Mesh Gradient Examples - Dark 3

rounded-out-t-3xl rounded-out-b-sm
rounded-out-l-2xl rounded-out-r-lg

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.

Card with Mixed Gradient Corners

rounded-out-tl-xl rounded-out-br-xl