In Tailwind CSS, Border Colors can be applied using the border and border-[color] utility classes. The border class sets all four border sides (top, right, bottom, and left) to the specified color, while the border-[color] class allows you to target individual sides.
Tailwind CSS also provides a set of predefined color classes that you can use to easily apply Border Colors without having to define custom color values. These predefined colors are taken from the color palette you configure in your project's configuration file.
1. Applying a Basic Border Color
To apply a basic border color to an element, you can use the border class followed by the desired color. For instance:
<div class="border border-blue-700 p-4">
This is a bordered element with a blue border.
</div>
In this example, we've applied a blue border to the element using the border and border-blue-500 classes. The p-4 class adds padding to the element for better spacing.
2. Tailwind CSS applying predefined border color classes border size
<div class="border border-blue-700 p-3">border color</div>
<div class="border-2 border-blue-700 p-3">border Color</div>
<div class="border-4 border-blue-700 p-3">border Color</div>
<div class="border-8 border-blue-700 p-3">border Color</div>
3. Tailwind CSS border color with opacity.
<div class="border-4 border-blue-700/10 p-3">border color opacity</div>
<div class="border-4 border-blue-700/25 p-3">border color opacity</div>
<div class="border-4 border-blue-700/50 p-3">border color opacity</div>
<div class="border-4 border-blue-700/75 p-3">border color opacity</div>
<div class="border-4 border-blue-700/100 p-3">border color opacity</div>
4. Applying Border Color to Individual Sides
<div class="border-4 border-blue-100 border-t-blue-700 p-3">border top color</div>
<div class="border-4 border-blue-100 border-l-blue-700 p-3">border lfet color</div>
<div class="border-4 border-blue-100 border-b-blue-700 p-3">border bottom color</div>
<div class="border-4 border-blue-100 border-r-blue-700 p-3">border right color</div>
5. Tailwind border color horizontal and vertical sides using border-{x|y}-{color}
<div class="border-4 border-blue-100 border-x-blue-700 p-3">border-x-blue-700</div>
<div class="border-4 border-blue-100 border-y-blue-700 p-3">border-y-blue-700</div>
6. Tailwind custom border color
<div class="p-3 border-4 border-[#0000FF]">border custom color</div>
7. Tailwind CSS border color with input form
<input type="text" class="rounded-md border-2 border-red-400 px-4 py-2 outline-none focus:border-red-600" />
8. Responsive border
<div class="border border-blue-500 md:border-red-500 lg:border-green-500 p-4">
Responsive border colors based on breakpoints.
</div>
9. Tailwind CSS border color with outline buttons
<button class="px-6 py-2 text-indigo-700 border-2 border-indigo-500">
Button
</button>
<button class="px-6 py-2 text-green-700 border-2 border-green-500">
Button
</button>
<button class="px-6 py-2 text-[#bfff00] border-2 border-[#bfff00]">
Button
</button>
10. Tailwind CSS Engaging Hover Effect & Focus Effects
<button class="border border-gray-300 hover:border-blue-500 focus:border-blue-700 px-5 py-3">
Hover me!
</button>
11. Dark and Light Mode Variants
<div class="border border-blue-500 dark:border-yellow-500"></div>
12. Customizing Border Colors
While Tailwind CSS offers a variety of predefined color options, you might want to use custom colors for your project's branding. To achieve this, you can define custom color values in your project's configuration file and then use those values for Border Colors.
- Configuring Custom Colors
module.exports = {
theme: {
extend: {
colors: {
brand-blue: '#007ACC',
brand-red: '#FF5757',
},
},
},
variants: {},
plugins: [],
}
- Using Custom Border Colors
Now that you've defined your custom colors, you can use them in your HTML:
<div class="border border-brand-blue p-4">
This element has a custom blue border color.
</div>
<div class="border border-brand-red p-4">
This element has a custom red border color.
</div>
