Ask any question about Tailwind CSS here... and get an instant response.

How can I create a smooth gradient border around a box with Tailwind CSS?

Asked on Sep 24, 2025

Answer

To create a smooth gradient border around a box using Tailwind CSS, you can utilize the `bg-gradient-to-*` utilities in combination with `border-transparent` to achieve the desired effect. Here's a simple example of how you can do this:

<!-- BEGIN COPY / PASTE -->
    <div class="p-1 bg-gradient-to-r from-blue-500 to-green-500 rounded-lg">
      <div class="bg-white border border-transparent rounded-lg p-4">
        Content goes here
      </div>
    </div>
    <!-- END COPY / PASTE -->

Additional Comment:

Wrap the inner content in a div with padding and a gradient background to simulate a gradient border.
Apply `border-transparent` to the inner box to prevent any default border color from showing.
Use `rounded-lg` to ensure the border and inner box have matching rounded corners.
Adjust the gradient direction and colors using `bg-gradient-to-*` and `from-*`/`to-*` utilities as needed.

✅ Answered with Tailwind CSS best practices.

Ask any question about Tailwind CSS here... and get an instant response.

How can I create a smooth gradient border around a box with Tailwind CSS?

Asked on Sep 24, 2025

Answer

The Q&A Network