1. Content
  2. Dividers and <hr>

Content

Tailwind CSS Dividers and <hr>

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

Example

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









                
                  <hr>
                  <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">
                
              

Height

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





                
                  <hr>
                  <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.

Or

Responsive

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.