Master the art of creating beautiful and responsive borders with Tailwind's utility-first approach
Borders in Tailwind CSS provide a flexible way to define edges around elements, improving visual hierarchy and separation in your UI. They're essential for creating cards, buttons, inputs, and other components that need clear boundaries.
Tailwind makes it easy to apply borders of different widths, colors, and styles to any element with simple utility classes. This allows for rapid prototyping and consistent design across your project.
border-{width}
Set border width
border-{color}
Set border color
rounded-{size}
Set border radius
Control the thickness of borders with utility classes like border, border-2, and border-4.
Apply colors with border-{color}-{shade} utilities.
Target specific sides with border-{side}-{width} utilities.
Round corners with rounded-{size} utilities.
Use outline for borders that don't affect layout.
border
Default 1px border
border-2 border-blue-500
2px blue border
border-4 border-red-500
4px red border
border-x-2
Left & Right borders
border-y-2
Top & Bottom borders
border-t-2
Top border only
border-r-2
Right border only
border-b-2
Bottom border only
border-l-2
Left border only
rounded
Default rounded corners (0.25rem)
rounded-lg
Large rounded corners (0.5rem)
rounded-xl
Extra large corners (0.75rem)
rounded-2xl
2x large corners (1rem)
rounded-3xl
3x large corners (1.5rem)
rounded-full
Full rounded corners (9999px)
rounded-t-xl
Top corners rounded only
rounded-b-xl
Bottom corners rounded only
Unlike regular borders, outlines don't take up space in the document flow. They're perfect for focus states and interactive elements where you don't want to shift the layout when highlighting.
Cards often use borders to define their boundaries. The subtle border here creates a clean, defined edge.
Code Example:
<div class="border border-gray-200 rounded-lg p-5
hover:border-indigo-300 hover:shadow-md
transition-all duration-300">
<!-- Card content here -->
</div>Border color can indicate validation state
Code Example:
<input type="text"
class="border border-gray-300 rounded-md w-full px-3 py-2
focus:outline-none focus:ring-2 focus:ring-indigo-500
focus:border-indigo-500 transition-all">| Name | Title | Status |
|---|---|---|
| Jane Doe | Frontend Developer | Active |
| John Smith | UI Designer | Pending |
Table Borders:
border for the entire table containerdivide-y for horizontal dividers between rowsborder-r for vertical cell dividersTailwind's borders can be responsive by using breakpoint prefixes. This allows you to show or hide borders at different screen sizes.
This element has different border widths on different screen sizes
<div class="border-0 sm:border md:border-2 lg:border-4">
Responsive borders
</div>
When designing responsive layouts, consider using border-0 to hide borders on mobile
and adding them back with sm:border on larger screens. This creates a cleaner
mobile experience with fewer visual elements.
As you advance in your Tailwind CSS journey, consider creating custom border utilities in your tailwind.config.js file. This allows you to establish a consistent border system across your entire project.
// tailwind.config.js
module.exports = {
theme: {
extend: {
borderWidth: {
'3': '3px',
'6': '6px',
},
borderRadius: {
'special': '0.375rem 1.5rem 0.375rem 1.5rem',
}
}
}
}