Brave Search

Tailwind CSS and different border styles for div

stackoverflow.com › questions › 77056698 › tailwind-css-and-different-border-styles-for-div

You can use your code like in below example:

<div className={`w-0 h-0 border-8 border-solid border-transparent mx-auto border-${isCardExpired ? '[rgb(250,77,86)]' : '[rgb(232,125,26)]' }`} ></div>

However what you are trying to achieve is difficult through tailwind CSS, as Tailwind CSS is primarily designed for utility-first and atomic CSS classes. Complex border styling like the one you described might not be achievable with Tailwind classes alone. You will have to use like below

function App() {
  const isCardExpired = true;
  const borderColor = isCardExpired ? 'border-red-600' : 'border-orange-500';

  return (
    <div className="flex justify-center">
      <div className={`w-0 h-0 ${borderColor} border-b-8`} style={{ borderLeft: '9px solid transparent', borderRight: '9px solid transparent' }}></div>
    </div>
  );
}

export default App;

Answer from Mehnaz Yasmeen on Stack Overflow

Tailwind CSS

tailwindcss.com › docs › border-style

border-style - Borders - Tailwind CSS

Utilities for controlling the style of an element's borders.

Tailwind CSS

v3.tailwindcss.com › docs › border-style

Border Style - Tailwind CSS

Use border-* to control an element’s border style.

Videos

07:36

YouTube

Tailwind CSS Border Gradient Tutorial - YouTube

Border Style in Tailwind CSS Tutorial | Tailwind CSS | DesignCoach ...

#6 Tailwind CSS Borders - YouTube

October 9, 2025

youtube.com

Borders with Tailwindcss — Course Part 8 - YouTube

December 17, 2022

09:52

YouTube

Understanding Borders in Tailwind CSS - 06 | Tailwind CSS Tutorial ...

October 11, 2022

06:48

YouTube

Tailwind CSS Course | Borders - YouTube

kombai.com › tailwind › border-style

Tailwind CSS Border Style

Border style determines the style of the border- solid, dashed, dotted, double, hidden, or none. Tailwind CSS further simplifies adding the border styles through its suite of border style utilities.

Tailwind CSS

tailwindcss.com › docs › border-width

border-width - Borders - Tailwind CSS

Use border or border-<number> utilities like border-2 and border-4 to set the border width for all sides of an element:

Pagedone

pagedone.io › docs › borders

Tailwind CSS Borders | Pagedone

Border Style classes are used to style borders in tailwind css border.

Stack Overflow

stackoverflow.com › questions › 77056698 › tailwind-css-and-different-border-styles-for-div

reactjs - Tailwind CSS and different border styles for div - Stack Overflow

Top answer

1 of 2

1

You can use your code like in below example:

<div className={`w-0 h-0 border-8 border-solid border-transparent mx-auto border-${isCardExpired ? '[rgb(250,77,86)]' : '[rgb(232,125,26)]' }`} ></div>

However what you are trying to achieve is difficult through tailwind CSS, as Tailwind CSS is primarily designed for utility-first and atomic CSS classes. Complex border styling like the one you described might not be achievable with Tailwind classes alone. You will have to use like below

function App() {
  const isCardExpired = true;
  const borderColor = isCardExpired ? 'border-red-600' : 'border-orange-500';

  return (
    <div className="flex justify-center">
      <div className={`w-0 h-0 ${borderColor} border-b-8`} style={{ borderLeft: '9px solid transparent', borderRight: '9px solid transparent' }}></div>
    </div>
  );
}

export default App;

2 of 2

0

You can use a utility like tailwind-merge or clsx like this:

<div 
  className={
    clsx("w-0 h-0 border-x-8 border-solid border-transparent mx-auto", 
    isCardExpired 
      ? "border-[rgb(250,77,86)]" 
      : "border-[rgb(232,125,26)]")} 
/>

You can also add the rgb colors to your theme for easier use:

module.exports = {
  theme: {
    extend: { ... },
    colors:{
      custom1: 'rgb(12,159,100)',
      custom2: 'rgb(232,125,26)'
      ...
    }
  },
  plugins: [...],
}

And then use it as:

<div 
  className={
    clsx("w-0 h-0 border-x-8 border-solid border-transparent mx-auto", 
    isCardExpired 
      ? "border-custom1" 
      : "border-custom2")} 
/>

Edit: explanation of Tailwind border dimensions are here. You already have border-x-8 border-solid which is not part of the conditional, so it will work as you posted. If you need the width and height to be 8px, then you can change the border-x-8 to border-8. If as you stated only bottom then border-b-8 instead of border-x-8.

TW Elements

tw-elements.com › docs › standard › extended › borders

Tailwind CSS Borders - Free Examples & Tutorial

Use responsive borders utilities with TW elements. A tutorial how to style the border and border-radius of an element.

Find elsewhere

Google Bing Mojeek

GeeksforGeeks

geeksforgeeks.org › css › tailwind-css-border-style

Tailwind CSS Border Style - GeeksforGeeks

July 23, 2025 - This class is used for controlling the style of an element's borders. ... <!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 ...

GitHub

github.com › Log1x › tailwindcss-border-styles

GitHub - Log1x/tailwindcss-border-styles: Tailwind CSS plugin to generate individual border side style classes.

// tailwind.config.js { theme: { borderStyles: { styles: true, // defaults to false colors: true, // defaults to false } } plugins: [ require('tailwindcss-border-styles')(), ], }

Author Log1x

TutorialsPoint

tutorialspoint.com › tailwind_css › tailwind_css_border_style.htm

Tailwind CSS - Border Style

Tailwind CSS Border Style is predefined classes that allow you to easily set different styles for borders on elements, including their width, style (such as solid, dashed, or dotted), and radius.

Geekster

geekster.in › home › border property in tailwind

Border Property In Tailwind - Geekster Article

July 2, 2024 - Master border property in tailwind CSS. Learn to style borders with ease using width, color, style, and radius utilities.

Nativewind

nativewind.dev › docs › tailwind › borders › border-style

Border Style

October 14, 2025 - Border Style · Last updated on October 14, 2025 · Edit · Please refer to the documentation on the Tailwind CSS website · Use border-0 instead of border-none to remove borders on native.

Tailwind CSS

tailwindcss.com › docs › outline-style

outline-style - Borders - Tailwind CSS

Tailwind CSS

v3.tailwindcss.com › docs › border-width

Border Width - Tailwind CSS

Preflight applies a global border ... just a border-width utility in projects using Preflight. Tailwind lets you conditionally apply utility classes in different states ......

Tailwind CSS

tailwindcss.com › docs › border-radius

border-radius - Borders - Tailwind CSS

Here are all the available border radius logical property utilities and their physical property equivalents in both LTR and RTL modes. For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.

Tailwind CSS

tailwindcss.com › docs › border-color

border-color - Borders - Tailwind CSS

Utilities for controlling the color of an element's borders.

Tailwind

windframe.dev › tailwind › classes › tailwind-border-style

The tailwind border style utility .

April 2, 2024 - In Tailwind CSS, the border-style property is used to define the style of the border around an element.

Tailwind CSS

tailwindcss.com › docs › box-sizing

box-sizing - Layout - Tailwind CSS

Use the box-border utility to set an element's box-sizing to border-box, telling the browser to include the element's borders and padding when you give it a height or width.