Border Style

Utilities for controlling the style of an element's borders.

Class reference

.border-solidborder-style: solid;
.border-dashedborder-style: dashed;
.border-dottedborder-style: dotted;
.border-doubleborder-style: double;
.border-noneborder-style: none;


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






<div class="border-solid border-4 border-gray-600 ..."></div>
<div class="border-dashed border-4 border-gray-600 ..."></div>
<div class="border-dotted border-4 border-gray-600 ..."></div>
<div class="border-double border-4 border-gray-600 ..."></div>
<div class="border-none border-4 border-gray-600 ..."></div>


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.

<div class="border-solid sm:border-dashed md:border-dotted lg:border-double xl:border-none">


Responsive and pseudo-class variants

By default, only responsive variants are generated for border style utilities.

You can control which variants are generated for the border style utilities by modifying the borderStyle property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     borderStyle: ['responsive'],
+     borderStyle: ['responsive', 'hover', 'focus'],


If you don't plan to use the border style utilities in your project, you can disable them entirely by setting the borderStyle property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     borderStyle: false,

Tailwind UI is now in early access!