Is there any way to make a border 2 colors through Tailwind? I am trying to make a black and white top border, but it won't let me use a gradient since those are just for backgrounds
I tried using the CSS method of having a small container and giving the outside container a gradient color but I was wondering if there was a more intuitive way to just apply the linear gradient to the border itself
No, the small container wrapper around the big container is the normal solution for this. There is not necessarily a better way to do it even when using plain CSS other than possibly using the 'border-image' property, but then it eliminates the possibility of using the 'border-radius' property.
Below is the simple solution, that it seems you have seen before:
<div class="min-w-screen flex min-h-screen items-center justify-center bg-slate-500">
<div class="w-fit bg-gradient-to-r from-black to-white pb-2 pt-2 rounded-sm">
<div class="content h-48 w-48 bg-orange-200 text-center">
Content
</div>
</div>
</div>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments