Border Style

Border style utilities: solid, dashed, and none

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

Class	Style	CSS	Usage
.border-solid	Solid	border-style: solid;	Solid line border
.border-dashed	Dashed	border-style: dashed;	Dashed line border
.border-dotted	Dotted	border-style: dotted;	Dotted line border
.border-double	Double	border-style: double;	Double line border
.border-none	None	border-style: none;	No border style

Interactive Demo

Try the different border styles below. Click on any button to copy the class name to your clipboard. Hover to see descriptions.

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

Related Utilities

Border Width

Border width utilities

Border Radius

Border radius utilities

Border Colors

Border color utilities

Borders Overview

Complete borders overview