Tailwind CSS Bottom Border
User
how to give border bottom in taiwind
Assistant
In Tailwind CSS, you can add a bottom border using the `border-b` class. Here’s how you can do it:
### Basic Bottom Border:
<div class="border-b border-black">Bottom Border</div>– `border-b` → Adds a border to the bottom.
– `border-black` → Sets the border color to black.
### Custom Border Width:
<div class="border-b-2 border-gray-500">Thicker Bottom Border</div>– `border-b-2` → Sets the border thickness to `2px`.
### Dashed or Dotted Border:
<div class="border-b-2 border-dashed border-blue-500">Dashed Border</div>
<div class="border-b-2 border-dotted border-red-500">Dotted Border</div>– `border-dashed` → Makes the border dashed.
– `border-dotted` → Makes the border dotted.
### Border with Hover Effect:
<div class="border-b border-transparent hover:border-b-2 hover:border-green-500 transition-all">
Hover Me
</div>– `border-transparent` → Initially hides the border.
– `hover:border-b-2` → Increases the border thickness on hover.
– `hover:border-green-500` → Changes the border color on hover.
– `transition-all` → Adds a smooth transition effect.
Let me know if you need more customization! 🚀