For a long time now, I have been admiring gradient borders and researching how to create such borders with minimal code and without any external packages. Gradient borders are a great way to add visual interest and depth to a website. They can highlight important elements, create a sense of movement, or simply make a website look more stylish. Here are few steps to create gradient borders with Tailwind CSS.

Step 1: Create a parent container

Create a div element, add rounded-3xl and p-px utilities to it.  Note that you can use another border radius utility and padding; visually, the padding will be seen as the border's size.

<div class="rounded-3xl p-px @container"></div>

Step 2: Add a gradient background to the container

<div class="rounded-3xl p-px @container bg-gradient-to-b from-gray-200 to-transparent"></div>

If your card is over a blurry background, you should play with opacity to get a better look.

Example: from-gray-950/40

Step 3: Create another container inside the parent container

<div class="rounded-3xl p-px @container bg-gradient-to-b from-gray-200 to-transparent">
    <div class="bg-gray-50 p-10">
      <!-- child div -->
    </div>
</div>

Step 4: Add a custom border radius to the child container

As the parent container has a border radius, you have to add some to the child container to get a perfect rounded border.

Use this formula to get the border radius of the child container :

Child container border radius = (parent container border radius) - (parent container padding).

For example, if the parent container border radius is 10px and the parent container padding is 2px, then the child container border radius would be 10px - 2px = 8px.

To calculate, use the css calc function to get the exact border radius of the child container.

You can calculate in your head, but using the 'calc' function allows you to obtain the result even when you don't know the padding or border radius of the parent container, as may be the case when using css variables.

The CSS rule should look like this :

.child-container {
  border-radius: calc(3.5rem - 1px);
}

Arbitrary value

Use an arbitrary value to apply the formula to the Tailwind CSS rounded utility.

<div class="rounded-3xl p-px @container bg-gradient-to-b from-gray-200 to-transparent">
    <div class="bg-gray-50 p-10 `rounded-[calc(1.5rem-1px)]`">
     <!-- child div -->
    </div>
</div>

Step 5: Add Content to Your Card

Now add some content to your child container so it can appear in the DOM.

<div class="rounded-3xl p-px bg-gradient-to-b @container from-gray-200 to-transparent">
    <div class="bg-gray-50 p-10 rounded-[calc(1.5rem-1px)]">
        <p class="text-gray-700 dark:text-gray-300">I absolutely love
            Techtales! This website is a useful source of tech tutorials and information that I struggle for hours googling. Never knew I could find such detailed tutorials here.
        </p>
        <div class="mt-8 flex gap-4 items-center">
            <img class="h-12 w-12 rounded-full" src="https://pbs.twimg.com/profile_images/1599029039297077249/p0znhFdE_400x400.jpg" alt="" />
            <div>
                <h3 class="text-lg font-medium text-gray-700 dark:text-white">James Bond</h3>
                <span class="text-sm tracking-wide text-gray-600 dark:text-gray-400">Fullstack Developer</span>
            </div>
        </div>
    </div>
</div>

Here is the result, note I tweaked the colors to pink-500 via purple-500, to yellow-400 to make the gradient more visible.

Congratulations, you've created gradient borders using Tailwind CSS!

You can use this technique to craft a variety of gradient borders with different colors, gradient styles, and border radii. This approach adds visual interest and depth to your website while maintaining a clean, modern aesthetic.

Bonus

You can now advance your gradient border by adding some animation to make it come alive. This would require adding some keyframes to the parent component for the animations. The code could look something like this:

<div class="rounded-3xl p-px bg-gradient-to-r from-pink-500 via-purple-500 to-yellow-500 animate-gradient">
    <div class="bg-gray-50 p-10 rounded-[calc(1.5rem-1px)]">
        <p class="text-gray-700 dark:text-gray-300">
            Animated gradient borders are so cool!
        </p>
    </div>
</div>

Now the next step is to add CSS keyframes into our globals.css file. This would require defining them in the layer utilities.

/* globals.css */
@layer utilities {
  .animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 6s ease infinite;
  }
  @keyframes gradient-shift {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
}

Now you can brag about this to your friends and feel confident as a frontend developer.