Cool css borders with corner radii, a circle helper, conditional radii that produce a hand-drawn border, and some blobs.

css borders with corner radii

<section id="example" class="bg-gray-50 py-16">
    <div class="container space-y-8">
        <div
            class="hand-drawns mx-auto max-w-4xl space-y-4 space-x-4 text-center"
        >
            <button class="radius-drawn-1 border p-8">Handrawn 1</button>
            <button class="radius-drawn-2 border p-8">Handrawn 2</button>
            <button class="radius-drawn-3 border p-8">Handrawn 3</button>
            <button class="radius-drawn-4 border p-8">Handrawn 4</button>
            <button class="radius-drawn-5 border p-8">Handrawn 5</button>
            <button class="radius-drawn-6 border p-8">Handrawn 6</button>
        </div>
        <div class="blobs mx-auto max-w-4xl space-y-4 space-x-4 text-center">
            <button class="radius-blob-1 border p-8">Blob 1</button>
            <button class="radius-blob-2 border p-8">Blob 2</button>
            <button class="radius-blob-3 border p-8">Blob 3</button>
            <button class="radius-blob-4 border p-8">Blob 4</button>
            <button class="radius-blob-5 border p-8">Blob 5</button>
            <button class="radius-blob-6 border p-8">Blob 6</button>
        </div>
    </div>
    <div class="container min-w-[640px] !p-0">
        <div class="radius-conditional-6 mt-8 border-2 bg-gray-100 p-16">
            <h2 class="mb-8 text-2xl font-bold">
                Test Conditional Border Radius
            </h2>
            <p class="font-medium">How it works:</p>
            <ol class="mt-2 list-decimal space-y-1 pl-5">
                <li>On large screens: Corners are rounded</li>
                <li>When screen gets too small: Corners become square</li>
                <li>This helps with space constraints on mobile devices</li>
            </ol>
        </div>
    </div>
</section>

tailwind.css

@import "tailwindcss";

/* Cool cssborders with corner radii, a circle helper, conditional radii, 
    that produce a hand-drawn border, and some blobs.

    Tailwind utilities:
      - Hand drawn border radius
      - Blob border radius
      - Conditional border radius
*/
:root {
  /* Standard border radius */
  --radius-1: 2px;
  --radius-2: 5px;
  --radius-3: 1rem;
  --radius-4: 2rem;
  --radius-5: 4rem;
  --radius-6: 8rem;

  /* Hand-drawn border radius */
  --radius-drawn-1: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --radius-drawn-2: 125px 10px 20px 185px / 25px 205px 205px 25px;
  --radius-drawn-3: 15px 255px 15px 225px / 225px 15px 255px 15px;
  --radius-drawn-4: 15px 25px 155px 25px / 225px 150px 25px 115px;
  --radius-drawn-5: 250px 25px 15px 20px / 15px 80px 105px 115px;
  --radius-drawn-6: 28px 100px 20px 15px / 150px 30px 205px 225px;

  /* Blob border radius */
  --radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
  --radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
  --radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;
  --radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;
  --radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;
  --radius-blob-6: 42% 58% 62% 38% / 48% 52% 48% 52%;

  /* Conditional border radius */
  --radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));
  --radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2));
  --radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3));
  --radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4));
  --radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5));
  --radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6));
}

/* Custom utilities */
/* Cool looking drawn border radius */
@utility radius-drawn-1 { border-radius: var(--radius-drawn-1); }
@utility radius-drawn-2 { border-radius: var(--radius-drawn-2); }
@utility radius-drawn-3 { border-radius: var(--radius-drawn-3); }
@utility radius-drawn-4 { border-radius: var(--radius-drawn-4); }
@utility radius-drawn-5 { border-radius: var(--radius-drawn-5); }
@utility radius-drawn-6 { border-radius: var(--radius-drawn-6); }

/* Blob border radius */
@utility radius-blob-1 { border-radius: var(--radius-blob-1); }
@utility radius-blob-2 { border-radius: var(--radius-blob-2); }
@utility radius-blob-3 { border-radius: var(--radius-blob-3); }
@utility radius-blob-4 { border-radius: var(--radius-blob-4); }
@utility radius-blob-5 { border-radius: var(--radius-blob-5); }
@utility radius-blob-6 { border-radius: var(--radius-blob-6); }

/* Conditional border radius */
@utility radius-conditional-1 { border-radius: var(--radius-conditional-1); }
@utility radius-conditional-2 { border-radius: var(--radius-conditional-2); }
@utility radius-conditional-3 { border-radius: var(--radius-conditional-3); }
@utility radius-conditional-4 { border-radius: var(--radius-conditional-4); }
@utility radius-conditional-5 { border-radius: var(--radius-conditional-5); }
@utility radius-conditional-6 { border-radius: var(--radius-conditional-6); }