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.
In this guide, we will learn how to effectively use border style utilities in Tailwind:
| Class | Properties | Example |
|---|---|---|
border-solid | border-style: solid; | <div className="border-solid"></div> |
border-dashed | border-style: dashed; | <div className="border-dashed"></div> |
border-dotted | border-style: dotted; | <div className="border-dotted"></div> |
border-double | border-style: double; | <div className="border-double"></div> |
border-hidden | border-style: hidden; | <div className="border-hidden"></div> |
border-none | border-style: none; | <div className="border-none"></div> |
Overview of Border Style
Adding the Border Style
To add the border style to an element, use the border-* utilities, e.g., border-dashed, border-dotted, etc.
export default function SolidAndDashedBorders() { return ( <div className="w-screen h-screen flex flex-wrap items-center justify-center"> {/* Dashed border */} <div className="border border-dashed border-black bg-white p-6 shadow-lg h-80 w-80"> {/* border-dashed -> border-style: dashed */} <h2 className="text-xl font-semibold">Dashed Border</h2> <p className="text-gray-700 mt-2"> This box uses a dashed boundary. </p> <img src="https://images.unsplash.com/photo-1489269637500-aa0e75768394" alt="Random" className="mt-4 max-w-full" /> </div> </div> ); }
Removing the Border Style
To remove the border style from an element, use the border-none utility. This utility is particularly useful when applied on a certain state or breakpoint.
export default function OmitBorderStyles() { return ( <div className="w-screen h-screen flex flex-wrap items-center justify-center"> {/* No Border */} <div className="border border-none border-black bg-white p-6 shadow-lg h-80 w-80"> {/* border-none -> border-style: none */} <h2 className="text-xl font-semibold">No Border</h2> <p className="text-gray-700 mt-2"> This box has no border style. </p> <img src="https://images.unsplash.com/photo-1489269637500-aa0e75768394" alt="Random" className="mt-4 max-w-full" /> </div> </div> ); }
States and Responsiveness
Hover and Focus States
Tailwind provides state modifiers to apply a border-style only when certain states are active. For example, to apply the border-dashed on hover, use hover:border-dashed.
export default function InteractableBorders() { return ( <div className="w-screen h-screen flex flex-wrap items-center justify-center"> {/* On hover => Border Dashed */} <div className="border border-solid hover:border-dashed border-black bg-white p-6 shadow-lg h-80 w-80"> <h2 className="text-xl font-semibold">Solid/Dashed Border</h2> <p className="text-gray-700 mt-2"> This box has a solid border that changes into dashed on hover. </p> <img src="https://images.unsplash.com/photo-1489269637500-aa0e75768394" alt="Random" className="mt-4 max-w-full" /> </div> </div> ); }
Breakpoint Modifiers
Breakpoint modifiers enable you to use an utility class at a specific screen width. Tailwind’s default breakpoints include sm, md, lg, xl, and 2xl, but you can customize them in your configuration if necessary. By prepending a breakpoint to a border style utility, you override that style at or beyond a specified min-width. For instance, an element might have border-none on smaller screens but switch to border-solid on medium screens.
export default function ResponsiveBorders() { return ( <div className="w-screen h-screen flex flex-wrap items-center justify-center"> {/* border-none on default border-dotted on screens >= 768px [md] border-solid on screens >= 1024px [lg] */} <div className="border border-none md:border-dotted lg:border-solid border-black bg-white p-6 shadow-lg h-80 w-80"> <h2 className="text-xl font-semibold">Responsive Border</h2> <p className="text-gray-700 mt-2"> This box has different border styles on different screens. </p> <img src="https://images.unsplash.com/photo-1489269637500-aa0e75768394" alt="Random" className="mt-4 max-w-full" /> </div> </div> ); }
Real World Examples
Product Card Grid with Dashed Borders
This example shows a grid of product cards with dashed borders for a modern e-commerce interface.
export default function ProductGrid() { const products = [ { id: 1, name: "Premium Leather Backpack", price: "$129.99", src: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa", alt: "Brown leather backpack" }, { id: 2, name: "Vintage Canvas Messenger", price: "$89.99", src: "https://images.unsplash.com/photo-1544816155-12df9643f363", alt: "Gray canvas messenger bag" }, { id: 3, name: "Travel Duffel Bag", price: "$149.99", src: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62", alt: "Black travel duffel bag" }, { id: 4, name: "Mini Crossbody Purse", price: "$79.99", src: "https://images.unsplash.com/photo-1594633313593-bab3825d0caf", alt: "Red crossbody purse" }, { id: 5, name: "Business Briefcase", price: "$199.99", src: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62", alt: "Leather briefcase" }, { id: 6, name: "Weekend Tote Bag", price: "$69.99", src: "https://images.unsplash.com/photo-1591561954557-26941169b49e", alt: "Canvas tote bag" } ]; return ( <div className="grid grid-cols-1 gap-6 p-8"> {products.map((product) => ( <div key={product.id} className="border-2 border-dashed border-gray-300 rounded-lg p-4 hover:border-blue-500 transition-colors" > <img src={product.src} alt={product.alt} className="w-full h-48 object-cover rounded-md" /> <h3 className="text-lg font-semibold mt-4">{product.name}</h3> <p className="text-gray-600">{product.price}</p> </div> ))} </div> ); }
Team Member Cards with Double Borders
A team member showcase with double-bordered cards for a corporate website.
export default function TeamGrid() { const team = [ { id: 1, name: "Sarah Johnson", role: "CEO", src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80", alt: "Sarah Johnson portrait", linkedin: "#" }, { id: 2, name: "Michael Chen", role: "CTO", src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e", alt: "Michael Chen portrait", linkedin: "#" }, { id: 3, name: "Emma Williams", role: "Design Director", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330", alt: "Emma Williams portrait", linkedin: "#" }, { id: 4, name: "David Miller", role: "Lead Developer", src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e", alt: "David Miller portrait", linkedin: "#" }, { id: 5, name: "Lisa Rodriguez", role: "Marketing Head", src: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e", alt: "Lisa Rodriguez portrait", linkedin: "#" }, { id: 6, name: "James Wilson", role: "Product Manager", src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e", alt: "James Wilson portrait", linkedin: "#" } ]; return ( <div className="grid grid-cols-1 gap-8 p-10 bg-gray-50"> {team.map((member) => ( <div key={member.id} className="relative border-4 border-double border-gray-800 p-6 bg-white" > <img src={member.src} alt={member.alt} className="w-32 h-32 rounded-full mx-auto" /> <div className="text-center mt-4"> <h3 className="text-xl font-bold">{member.name}</h3> <p className="text-gray-600">{member.role}</p> </div> </div> ))} </div> ); }
Feature Comparison Table with Hidden Borders
A pricing comparison table using solid borders on hover.
export default function PricingTable() { const features = [ { id: 1, plan: "Basic", price: "$9.99", features: ["1 User", "5GB Storage", "Basic Support", "Email Access", "Limited API Calls", "Community Access"] }, { id: 2, plan: "Pro", price: "$29.99", features: ["5 Users", "50GB Storage", "Priority Support", "Email & Phone Access", "Unlimited API Calls", "Advanced Analytics"] }, { id: 3, plan: "Enterprise", price: "$99.99", features: ["Unlimited Users", "500GB Storage", "24/7 Support", "Dedicated Manager", "Custom Integration", "White Label Option"] } ]; return ( <div className="p-8"> <div className="grid grid-cols-1 gap-0"> {features.map((plan) => ( <div key={plan.id} className="border border-hidden p-6 hover:border-solid hover:border-blue-500 transition-all" > <h3 className="text-2xl font-bold mb-4">{plan.plan}</h3> <p className="text-4xl font-bold mb-6">{plan.price}</p> <ul className="space-y-3"> {plan.features.map((feature, index) => ( <li key={index} className="flex items-center"> <span className="mr-2">✓</span> {feature} </li> ))} </ul> </div> ))} </div> </div> ); }
Blog Post Cards with Dashed Borders
A blog post grid featuring dashed borders for a distinctive look.
export default function BlogGrid() { const posts = [ { id: 1, title: "The Future of Web Development", excerpt: "Exploring upcoming trends in web development for 2024", author: "Alex Thompson", src: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6", alt: "Coding on laptop" }, { id: 2, title: "Mastering CSS Grid Layout", excerpt: "A comprehensive guide to CSS Grid Layout system", author: "Maria Garcia", src: "https://images.unsplash.com/photo-1498050108023-c5249f4df085", alt: "Web design layout" }, { id: 3, title: "JavaScript Best Practices", excerpt: "Essential tips for writing clean JavaScript code", author: "John Smith", src: "https://images.unsplash.com/photo-1555066931-4365d14bab8c", alt: "JavaScript code" }, { id: 4, title: "Responsive Design Techniques", excerpt: "Creating websites that work on any device", author: "Emma Davis", src: "https://images.unsplash.com/photo-1558655146-d09347e92766", alt: "Responsive design" }, { id: 5, title: "UX Design Principles", excerpt: "Fundamental principles of user experience design", author: "Chris Wilson", src: "https://images.unsplash.com/photo-1516321165247-4aa89a48be28", alt: "UX design" }, { id: 6, title: "Performance Optimization", excerpt: "Strategies for faster loading websites", author: "Sarah Lee", src: "https://images.unsplash.com/photo-1551033406-611cf9a28f67", alt: "Website performance" } ]; return ( <div className="grid grid-cols-1 gap-8 p-10"> {posts.map((post) => ( <div key={post.id} className="border-8 border-dashed border-gray-200 p-6 rounded-lg hover:border-blue-200 transition-colors" > <img src={post.src} alt={post.alt} className="w-full h-48 object-cover rounded-md mb-4" /> <h3 className="text-xl font-bold mb-2">{post.title}</h3> <p className="text-gray-600 mb-4">{post.excerpt}</p> <p className="text-sm text-gray-500">By {post.author}</p> </div> ))} </div> ); }
Project Showcase with Dotted Borders
A portfolio grid showing projects with dotted borders.
export default function PortfolioGrid() { const projects = [ { id: 1, title: "E-commerce Platform", category: "Web Development", src: "https://images.unsplash.com/photo-1557821552-17105176677c", alt: "E-commerce website" }, { id: 2, title: "Mobile Banking App", category: "Mobile Development", src: "https://images.unsplash.com/photo-1563986768609-322da13575f3", alt: "Banking application" }, { id: 3, title: "Social Media Dashboard", category: "UI/UX Design", src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f", alt: "Dashboard design" }, { id: 4, title: "Fitness Tracking Platform", category: "Full Stack", src: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6", alt: "Fitness app" }, { id: 5, title: "Real Estate Marketplace", category: "Web Development", src: "https://images.unsplash.com/photo-1560518883-ce09059eeffa", alt: "Real estate platform" }, { id: 6, title: "Educational Platform", category: "E-Learning", src: "https://images.unsplash.com/photo-1501504905252-473c47e087f8", alt: "E-learning platform" } ]; return ( <div className="grid gap-6 p-8 bg-gray-100"> {projects.map((project) => ( <div key={project.id} className="group relative border-4 border-dotted border-gray-300 overflow-hidden" > <img src={project.src} alt={project.alt} className="w-full h-64 object-cover transition-transform group-hover:scale-105" /> <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-75 p-4 text-white"> <h3 className="text-lg font-bold">{project.title}</h3> <p className="text-sm">{project.category}</p> </div> </div> ))} </div> ); }
Best Practices
Maintain Design Consistency
Maintaining a consistent look across your interface becomes simpler when you set clear guidelines for border usage. By selecting a few specific border styles—solid, dashed, or none, for example—you reduce visual fragmentation and build a brand identity.
Another aspect of consistency is setting uniform border widths and colors for similar elements. When all buttons, cards, and modals share the same baseline border styling, users can better recognize how elements should behave.
Optimize for Reusability
By designing reusable components for card, button, etc. with flexible border utilities, you remove the need to repeatedly define new border styles. If a change in brand direction arises—such as a new theme color or a shift from dotted to dashed borders—you only adjust the shared components.
Tailwind’s utility system can also be extended with custom classes. A single class, such as primary-border, can combine border-style, border-color, and border-width. Then, each element that requires this look references the same utility, guaranteeing consistency.
Accessibility Considerations
Enhance Readability and Navigability
Borders contribute to visual hierarchy and clarify an element’s boundaries, helping all users—particularly those with low vision—differentiate sections. An element with a well-defined border stands out from the background, reducing cognitive load and enabling faster navigation.
High-resolution displays and small devices can make faint or thin borders almost invisible. It’s wise to use an appropriate thickness (border-2 or border-4) or strong color to aid in content legibility. In many contexts, focusing on border styles for active or hovered elements can help direct a user’s attention more effectively.
Support Accessible Interactive Elements
Interactive elements—buttons, cards, forms—benefit especially from distinct borders. A well-defined border signals interactivity, reinforcing established conventions where buttons have noticeable borders.
When implementing complex UI components like sliders or toggles, also consider the effect that hover and focus styles have on user comprehension. For example, a border that transitions from none to solid can indicate interactivity for both mouse and keyboard users.
