Skip to main content

​
Overview

Control border appearance with style utilities. Border style works together with border width, color, and radius to create complete border styling.

​
Border Style Utilities

Border Style

.border-solidSolidborder-style: solid;Solid line border
.border-dashedDashedborder-style: dashed;Dashed line border
.border-noneNoneborder-style: none;No border style

​
Examples

​
Basic Border Styles

<!-- 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>

​
Combined with Colors

<!-- Solid colored border -->
<div class="border-2 border-solid border-blue p-4 rounded">Solid blue border</div>

<!-- Dashed colored border -->
<div class="border-2 border-dashed border-gray p-4 rounded">Dashed gray border</div>

​
Common Patterns

​
Form Inputs

<!-- Normal input with solid border -->
<input type="text" class="w-full p-3 border border-solid border-gray rounded" placeholder="Normal input">

<!-- Dashed input for optional fields -->
<input type="text" class="w-full p-3 border border-dashed border-gray rounded" placeholder="Optional field">

​
Button Variants

<!-- Solid button -->
<button class="btn btn-blue">Solid Button</button>

<!-- Dashed button -->
<button class="border-2 border-dashed border-gray text-gray px-6 py-3 rounded">
  Dashed Button
</button>

​
Card Borders

<!-- Card with solid border -->
<div class="card border border-solid border-gray-light p-6">Card with solid border</div>

<!-- Card with dashed border -->
<div class="card border border-dashed border-gray p-6">Card with dashed border</div>

​
Best Practices

  • Solid for standard: Use solid borders for most UI elements
  • Dashed for optional: Use dashed borders to indicate optional or less important elements
  • None to remove: Use border-none to remove borders when needed
  • Consistent usage: Use the same border style for similar elements

Border Width

Border width utilities

Border Radius

Border radius utilities

Border Colors

Border color utilities

Borders Overview

Complete borders overview