Template listing hero section background

A Deep Dive into Tailwind CSS Border Colors: Tips and Examples

Tailwind CSS blog | Published on : 16th August, 2023

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>

Simple border color with Tailwind CSS

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>

Tailwind CSS border color and size examples

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>

Tailwind CSS border color opacity

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>

Specific border color styling in Tailwind CSS

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>

Styling horizontal and vertical borders in Tailwind CSS

6. Tailwind custom border color

<div class="p-3 border-4 border-[#0000FF]">border custom color</div>

Tailwind CSS border color customization

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" />

Input field border color in Tailwind CSS

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>

Tailwind CSS button border color

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>

Read More :

  1. Exploring Tailwind CSS Border Width: Tips and Examples
  2. Mastering Border Radius in Tailwind CSS: A Comprehensive Guide
  3. Mastering Border-x and Border-y in Tailwind CSS: A Comprehensive Guide
Colorfull background image for highlight footer
TailwindTap
Our team is creating and sharing useful resources on a regular basis and thousands of developers are using Tailwind CSS to create amazing websites with TailwindTap's free open-source pre-made components and templates.

Hire Tailwind CSS Developers

TailwindTap FacebookTailwindTap TwitterLinkedinInstagram