How to create gradient borders

Steps to Create Gradient Borders in TailwindCSS

1. Create a Parent Container

   Start with a container to hold your gradient border. Use the rounded-sm utility to set the outer border radius and the p-px utility to simulate the border size using padding.

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

   📝 Note: You can adjust the rounded and p-px values for different border sizes and radii.

   
   

2. Apply Gradient Background

   Next, add a gradient background to the container using TailwindCSS’s bg-gradient utilities. Choose gradient directions and colors based on your design needs.

   <div class="rounded-3xl p-px bg-linear-to-b from-orange-400 to-purple-600"></div>
   

   📝 Note: You can use different gradient directions like to-t, to-b, to-l, to-r, to-tl, to-tr, to-bl, to-br.

   
   

3. Add a Child Container Inside the Parent

   Create another container within the parent to hold the content. This container will sit inside the gradient border.

   <div class="rounded-3xl p-px bg-linear-to-b from-gray-200 to-transparent">
       <div class="bg-gray-50 p-10"></div>
   </div>
   

   
   

4. Adjust the Inner Border Radius

   To ensure the child container aligns perfectly with the parent container’s border, calculate its radius using the Perfect Inner-Outer Radius Formula:

   Child Container Radius = Parent Radius - Parent Padding

   TailwindCSS allows you to achieve this with the calc() function in arbitrary values. Here’s how you apply it:

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

   
   

   Alternative Method: You can also use CSS variables to define the radius and padding values and calculate the child container’s radius dynamically. This method is useful for maintaining consistency and making changes easier.

   <div class="rounded-(--radius) p-(--border-size) bg-linear-to-b from-gray-200 to-transparent">
       <div class="rounded-[calc(var(--radius)-var(--border-size)] p-10"></div>
   </div>
   

   
   

5. Add Content to the Card

   Finally, populate the inner container with your desired content. Here’s an example of a testimonial card with a gradient border:

   <div class="rounded-3xl p-px bg-linear-to-b 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 Tailus! The component blocks are beautifully designed and easy to use, which makes creating a great-looking website a breeze.
           </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="Oketa Fred" />
               <div>
                   <h3 class="tfont-medium text-gray-950 dark:text-white">Oketa Fred</h3>
                   <span class="text-sm tracking-wide text-gray-600 dark:text-gray-400">Fullstack Developer</span>
               </div>
           </div>
       </div>
   </div>
   

Experiment with Variations

Once you master the basics, explore these variations to expand your design possibilities:

Multi-Color Gradients

Add multiple stops to your gradient for a vibrant, multi-colored effect:

<div class="rounded-3xl p-px bg-linear-to-br from-teal-400 via-pink-500 to-purple-600">
    <div class="bg-white p-10 rounded-[calc(1.5rem-1px)] dark:bg-gray-900"></div>
</div>

Stripe Secondary Button

Create Stripe’s App secondary button with a the gradient border Workaround and pseudo-elements:

<button class="relative h-8 px-3.5 rounded-lg bg-linear-to-b from-gray-300/75 to-gray-400 from-75% before:absolute before:inset-px before:rounded-[7px] before:bg-white hover:before:bg-gray-100">
    <span class="relative text-gray-950 text-sm">Button</span>
</button>