Border Width Control border thickness with width utilities.
Border Width .border-00 border-width: 0;No border .border-11px border-width: 1px;Thin border .border-22px border-width: 2px;Medium border .border-33px border-width: 3px;Thick border
Examples <!-- Border width examples --> < div class = "border-1 p-4 bg-white" > Thin border </ div > < div class = "border-2 p-4 bg-white" > Medium border </ div > < div class = "border-3 p-4 bg-white" > Thick border </ div > < div class = "border-0 p-4 bg-gray-light" > No border </ div > Border Style Control border appearance with style utilities.
Border Style .border-solidSolid border-style: solid;Solid line border .border-dashedDashed border-style: dashed;Dashed line border .border-noneNone border-style: none;No border style
Examples <!-- Border style examples --> < div class = "border-2 border-solid p-4 bg-white" > Solid border </ div > < div class = "border-2 border-dashed p-4 bg-white" > Dashed border </ div > < div class = "border-none p-4 bg-gray-light" > No border </ div > Border Radius Control corner rounding with radius utilities.
Border Radius .rounded-none0 border-radius: 0;Square corners .rounded-sm4px border-radius: 4px;Small rounding .rounded6px border-radius: 6px;Standard rounding .rounded-lg8px border-radius: 8px;Large rounding .rounded-xl12px border-radius: 12px;Extra large rounding .rounded-2xl16px border-radius: 16px;Very large rounding .rounded-full9999px border-radius: 9999px;Fully rounded (pills)
Examples <!-- Border radius examples --> < div class = "border-2 border-gray rounded-none p-4" > Square corners </ div > < div class = "border-2 border-gray rounded-sm p-4" > Small rounding </ div > < div class = "border-2 border-gray rounded p-4" > Standard rounding </ div > < div class = "border-2 border-gray rounded-lg p-4" > Large rounding </ div > < div class = "border-2 border-gray rounded-xl p-4" > Extra large rounding </ div > < div class = "border-2 border-gray rounded-full p-4" > Fully rounded </ div > Border Colors Control border color with semantic color utilities.
Border Colors .border-whiteWhite #ffffff border-color: #ffffff;White borders .border-blackBlack #000000 border-color: #000000;Black borders .border-grayGray #6b7280 border-color: #6b7280;Standard borders .border-gray-lightLight Gray #e5e7eb border-color: #e5e7eb;Subtle borders .border-blueBlue #3b82f6 border-color: #3b82f6;Primary borders
Examples <!-- Border color examples --> < div class = "border-2 border-gray p-4 rounded" > Gray border </ div > < div class = "border-2 border-gray-light p-4 rounded" > Light gray border </ div > < div class = "border-2 border-blue p-4 rounded" > Blue border </ div > < div class = "border-2 border-black p-4 rounded" > Black border </ div > Common Border Patterns Card with Border
Bordered Card < div class = "border border-gray-light rounded-lg p-6 bg-white" > < h3 class = "text-xl font-600 mb-4" > Card Title </ h3 > < p class = "text-gray" > Card content with subtle border </ p > </ div >
Form Inputs <!-- Normal input --> < input type = "text" class = "w-full p-3 border border-gray rounded" placeholder = "Normal input" > <!-- Focused input --> < input type = "text" class = "w-full p-3 border-2 border-blue rounded" placeholder = "Focused input" > <!-- Error input --> < input type = "text" class = "w-full p-3 border-2 border-red rounded" placeholder = "Error input" >
Bordered Button < button class = "border-2 border-blue text-blue px-6 py-3 rounded hover:bg-blue hover:text-white" > Bordered Button </ button > Image with Border
Bordered Image < img src = "image.jpg" class = "border-2 border-gray-light rounded-lg" alt = "Bordered image" > Border Combinations Complete Border Styling
Complete Border Example < div class = "border-2 border-solid border-blue rounded-lg p-6 bg-white" > < h3 class = "text-xl font-600 mb-4" > Complete Border </ h3 > < p class = "text-gray" > This element has width, style, color, and radius all defined. </ p > </ div > Subtle Border
Subtle Border < div class = "border border-gray-light rounded p-4 bg-white" > < p class = "text-gray" > Subtle border for gentle separation </ p > </ div > Accent Border
Accent Border < div class = "border-l-4 border-blue bg-blue-light p-6 rounded" > < h3 class = "text-lg font-600 mb-2" > Accent Border </ h3 > < p class = "text-gray" > Left accent border for emphasis </ p > </ div > Border Utilities in Components Card Component
Card with Border Variants <!-- Standard card --> < div class = "card p-6" > Standard card </ div > <!-- Card with border --> < div class = "card border border-gray-light p-6" > Card with border </ div > <!-- Card with accent border --> < div class = "card border-l-4 border-blue p-6" > Card with accent </ div >
Button Border Styles <!-- Solid button --> < button class = "btn btn-blue" > Solid Button </ button > <!-- Outlined button --> < button class = "border-2 border-blue text-blue px-6 py-3 rounded hover:bg-blue hover:text-white" > Outlined Button </ button > <!-- Dashed button --> < button class = "border-2 border-dashed border-gray text-gray px-6 py-3 rounded" > Dashed Button </ button >
Form Border States <!-- Normal state --> < div class = "mb-4" > < label class = "text-sm font-500 mb-2" > Normal Input </ label > < input type = "text" class = "w-full p-3 border border-gray rounded" > </ div > <!-- Focused state --> < div class = "mb-4" > < label class = "text-sm font-500 mb-2" > Focused Input </ label > < input type = "text" class = "w-full p-3 border-2 border-blue rounded" > </ div > <!-- Error state --> < div class = "mb-4" > < label class = "text-sm font-500 mb-2 text-red" > Error Input </ label > < input type = "text" class = "w-full p-3 border-2 border-red rounded" > < p class = "text-sm text-red mt-1" > This field is required </ p > </ div > Border Best Practices Consistent Border Usage
Use Consistent Widths
Stick to the predefined border widths (1px, 2px, 3px) for consistency.
Match Border Radius
Use consistent border radius values throughout your design.
Choose Appropriate Colors
Use border colors that complement your design and provide good contrast.
Consider Accessibility
Ensure borders provide sufficient contrast and don’t interfere with content
readability.
Border Hierarchy
Border Hierarchy
No border: For seamless integration 2. Subtle border (1px, light
color): For gentle separation 3. Standard border (1px, medium color):
For clear definition 4. Emphasis border (2px, dark color): For important
elements 5. Accent border (thick, colored): For special emphasis Responsive Borders <!-- Responsive border example --> < div class = "border border-gray-light md:border-2 md:border-gray rounded-lg p-4" > < p > Border that gets thicker on larger screens </ p > </ div > Common Mistakes Avoid these border mistakes:
Don’t use too many different border styles in one design
Don’t make borders too thick (3px is usually the maximum)
Don’t use borders that compete with content for attention
Don’t forget to consider how borders look on different backgrounds
