Border Style

Basic usage

Setting the border style

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

<div
  className="**border-solid** border-2 border-indigo-600 ..."
  dark-className="**border-solid** border-2 border-sky-500 ..."
></div>
<div
  className="**border-dashed** border-2 border-indigo-600 ..."
  dark-className="**border-dashed** border-2 border-sky-500 ..."
></div>
<div
  className="**border-dotted** border-2 border-indigo-600 ..."
  dark-className="**border-dotted** border-2 border-sky-500 ..."
></div>
<div
  className="**border-double** border-4 border-indigo-600 ..."
  dark-className="**border-double** border-4 border-sky-500 ..."
></div>

No style

Use border-none to remove an existing border style from an element.

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

<button className="**border-none** ...">Save Changes</button>