1. Content
  2. Dividers and <hr>


Tailwind CSS Dividers and <hr>

Insert a horizontal rule or a thematic break to divide or separate sections.


The <hr> element has been simplified. Similar to browser defaults, <hr>s are styled via border-top.

                  <hr class="border-gray-800 dark:border-white">
                  <hr class="border-gray-500">
                  <hr class="border-teal-500">
                  <hr class="border-blue-500">
                  <hr class="border-red-500">
                  <hr class="border-yellow-500">
                  <hr class="border-white">


Control the height of the <hr> with border-width classes.

                  <hr class="border-2">
                  <hr class="border-4">
                  <hr class="border-8">

With label

Left, center and right aligned dividers with label.

Left aligned
Center aligned
Right aligned

Vertical button group with label

Vertically stacked button group with a divider.



Starting from a horizontal position, this text divider example will change to a vertical position on a small desktop.

Reduce browser size to see it in action.