Tailwind CSS
tailwindcss.com › docs › border-width
border-width - Borders - Tailwind CSS
<div class="border-t-4 border-indigo-500 ..."></div><div class="border-r-4 border-indigo-500 ..."></div><div class="border-b-4 border-indigo-500 ..."></div><div class="border-l-4 border-indigo-500 ..."></div>
Tailwind
windframe.dev › tailwind › classes › tailwind-border-width
Tailwind border width utility classes allow you to easily control the width of borders applied to elements in your web applications.
With a range of options and flexibility, you can achieve different border thicknesses and create visually appealing designs. ... Tailwind CSS provides a flexible way to customize the border width scale to suit your project's needs. You can modify the default border width values or add new ones to create a unique scale. To customize the tailwind border width scale, you can update the theme section of your Tailwind CSS configuration file. Here's an example of how you can customize the border width scale in your tailwind.config.js file:
Videos
03:55
#6 Tailwind CSS Borders - YouTube
09:52
Understanding Borders in Tailwind CSS - 06 | Tailwind CSS Tutorial ...
06:48
Tailwind CSS Course | Borders - YouTube
Borders with Tailwindcss — Course Part 8 - YouTube
11:46
Mastering Tailwind CSS v4.0: Borders Now Change with Text Color!
13:42
Tailwind CSS #4 - Borders - YouTube
TutorialsPoint
tutorialspoint.com › tailwind_css › tailwind_css_border_width.htm
Tailwind CSS - Border Width
<!DOCTYPE html> <html lang="en"> ... border-b-2 border-blue-500"> <h3 class="text-lg font-semibold">Section 1</h3> <p>This section has a 2-pixel thick blue border at the bottom....
Kombai
kombai.com › tailwind › border-width
Tailwind CSS Border Width
Another approach to maintaining design consistency is extending the design system within the tailwind.config.js file. For example, you might define specific border styles or widths like border-thin or border-thick to prevent arbitrary values in your codebase.
Tailwind CSS
tailwindcss.com › docs › border-style
border-style - Borders - Tailwind CSS
Basic example · Removing a border · Setting the divider style · Responsive design · Copyright © 2025 Tailwind Labs Inc.·Trademark Policy
PureCode AI
blogs.purecode.ai › home › a quick guide to understanding tailwind border width
A Quick Guide to Understanding Tailwind Border Width - Blogs
September 14, 2025 - In this example, margins increase as the screen size increases, providing spacing adjustments for different devices. ... The `hidden` class hides the element by default, but `sm:block` makes it visible on small screens. ... The text size grows as the screen size gets larger. To customize the default border width values in Tailwind CSS, you can modify your project’s configuration file, typically named `tailwind.config.js`. Here’s how you can do it:
Pagedone
pagedone.io › docs › borders
Tailwind CSS Borders | Pagedone
Use below tailwind border width example where you can also apply border width according to requirement by using utility classes of tailwind.
Top answer 1 of 2
1
the tailwind border classes only affect the thickness or style of the border. The width is determined by the width of the container that the border is applied to.
You could do something like:
<h2 class="w-1/2 border-b-2"> My Skills </h2>
In this example the border will take on the width of the container, which is set to w-1/2 which is 50%
2 of 2
0
I was able to do this with Tailwind alone by using an empty div under the actual div which contains the text and placing these two inside a parent div that has flex flex-col class.
Example React code:
<div className='flex flex-col'>
<div className='py-1 px-3 mx-1 font-bold text-sm text-black'>
{props.children}
</div>
{props.active ? <div className='w-1/2 transform translate-x-1/2 border-b-2 border-black'/> : null}
</div>
Effect of the above code (+ a few more styles):
Tailwind CSS
night-tailwindcss.vercel.app › docs › border-width
Border Width - Tailwind CSS
The values in this section will also control which utilities will be generated side. // tailwind.config.js module.exports = { theme: { borderWidth: { DEFAULT: '1px', '0': '0', '2': '2px', + '3': '3px', '4': '4px', + '6': '6px', - '8': '8px', } } }
TailwindTap
tailwindtap.com › blog › tailwind-css-border-width-guide
Exploring Tailwind CSS Border Width: Tips and Examples
Design is how it works."</blockquote> <cite class="mt-2 block font-semibold text-blue-500">- Steve Jobs</cite> </div> In this example, the border-l-4 class adds a 4-pixel border to the left side of the quote box, creating an elegant highlight effect.
GeeksforGeeks
geeksforgeeks.org › css › tailwind-css-border-width
Tailwind CSS Border Width - GeeksforGeeks
July 23, 2025 - The classes are border, border-0, border-2, border-4, and border-8. ... <!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 ...
Tailscan
tailscan.com › tailwind › borders
Tailwind Borders - Tailscan for Tailwind CSS
To use the border classes in Tailwind, ... For example, you might use the border-red-500 class to add a red border to an element, or the border-4 class to add a border that is 4 units thick....
Kombai
kombai.com › tailwind › border-style
Tailwind CSS Border Style
When implementing complex UI components ... styles have on user comprehension. For example, a border that transitions from none to solid can indicate interactivity for both mouse and keyboard users. ... Kombai writes clean React + Tailwind code that adheres to your design system and ...
Nativewind
nativewind.dev › docs › tailwind › borders › border-width
Border Width
TypographyContentFont FamilyFont ... ThicknessText IndentText OverflowText AlignText Underline OffsetVertical AlignWhitespaceWord Break · BackgroundsBackground AttachmentBackground ClipBackground ColorBackground ImageBackground OriginBackground PositionBackground RepeatBackground SizeGradient Color Stops · BordersBorder ColorBorder ...
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.
Top answer 1 of 8
45
You can apply border-width of 2px only to the top edge according to the documentation as following
<div class="border-t-2 border-blue-900">foo</div>
The error made was there is no utility class called border-t-1 in tailwind-CSS. Also applying border utility class adds the the CSS styling of border-width: 1px; which adds a border-width to all sides.
Check out the solution at tailwind playground
EDIT: Check out shingo.nakanishi's answer top apply border-top-width of 1px if you are using JIT mode
2 of 8
23
You can achieve this by using below class
border-solid border-0 border-t border-blue-900
Tailwind CSS
tailwindcss.com › docs › outline-width
outline-width - Borders - Tailwind CSS
Utilities for controlling the width of an element's outline.