Border Style

@include('_partials.class-table', [ 'rows' => [ [ '.border-solid', 'border-style: solid;', "Sets the border style on an element to solid.", ], [ '.border-dashed', 'border-style: dashed;', "Sets the border style on an element to dashed.", ], [ '.border-dotted', 'border-style: dotted;', "Sets the border style on an element to dotted.", ], [ '.border-double', 'border-style: double;', "Sets the border style on an element to double.", ], [ '.border-none', 'border-style: none;', "Disables the border on an element.", ], ] ])

Usage

Use .border-{style} to control an element's border style.

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

Responsive

To control the border style of an element at a specific breakpoint, add a {screen}: prefix to any existing border style utility. For example, use md:border-dotted to apply the border-dotted utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')@endslot @slot('md')@endslot @slot('lg')@endslot @slot('xl')@endslot @slot('code')@endslot @endcomponent

Customizing

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'border style', 'property' => 'borderStyle', ], 'variants' => [ 'responsive', ], ])