Documentación offline Tailwind CSS main
/ ó ⌘K
por @raupulus

border-style

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página
Clase Propiedades CSS
border-solid border-style: solid;
border-dashed border-style: dashed;
border-dotted border-style: dotted;
border-double border-style: double;
border-hidden border-style: hidden;
border-none border-style: none;
divide-solid & > :not(:last-child) {\n border-style: solid;\n}
divide-dashed & > :not(:last-child) {\n border-style: dashed;\n}
divide-dotted & > :not(:last-child) {\n border-style: dotted;\n}
divide-double & > :not(:last-child) {\n border-style: double;\n}
divide-hidden & > :not(:last-child) {\n border-style: hidden;\n}
divide-none & > :not(:last-child) {\n border-style: none;\n}

Examples#

Basic example#

Use utilities like border-solid and border-dotted to control an element's border style:

{

border-solid

border-dashed

border-dotted

border-double

}

<!-- [!code classes:border-solid,border-dashed,border-dotted,border-double] -->
<div class="border-2 border-solid ..."></div>
<div class="border-2 border-dashed ..."></div>
<div class="border-2 border-dotted ..."></div>
<div class="border-4 border-double ..."></div>

Removing a border#

Use the border-none utility to remove an existing border from an element:

{

}

<!-- [!code classes:border-none] -->
<button class="border-none ...">Save Changes</button>

This is most commonly used to remove a border style that was applied at a smaller breakpoint.

Setting the divider style#

Use utilities like divide-dashed and divide-dotted to control the border style between child elements:

{

01
02
03
}

<!-- [!code classes:divide-dashed] -->
<div class="grid grid-cols-3 divide-x-3 divide-dashed divide-indigo-500">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Responsive design#