Last updated: 15 January 2026

Tailwind CSS Divide

Add borders between child elements in Tailwind CSS with divide-x, divide-y, divide-{color}, and divide-{width} utilities. Perfect for lists and stacked layouts.

Interactive Divide Width Playground

Try each class live and inspect the CSS output.

Utility class
divide-x-2
CSS output
display: flex;

The divide utilities in Tailwind CSS add borders between child elements without needing to manually apply border classes to each item. Instead of adding border-b to every list item except the last one, you add a single divide-y to the parent and Tailwind handles the rest. It works using CSS adjacent sibling selectors under the hood.

How to Use Tailwind Divide

Apply divide classes to a parent element to insert borders between its direct children:

  • divide-y - Adds horizontal borders between stacked (vertical) children.
  • divide-x - Adds vertical borders between inline (horizontal) children.
  • divide-{color} - Sets the color of the dividers (e.g., divide-gray-200).
  • divide-{width} - Controls the thickness (e.g., divide-y-2, divide-y-4).
  • divide-{style} - Sets the border style (e.g., divide-dashed, divide-dotted).
HTML
1<ul class="divide-y divide-gray-200">
2  <li class="py-3">First item</li>
3  <li class="py-3">Second item</li>
4  <li class="py-3">Third item</li>
5</ul>
  • First item
  • Second item
  • Third item

Vertical Dividers with divide-x

For horizontal layouts like navigation bars or inline lists, use divide-x to place vertical borders between children:

HTML
1<div class="flex divide-x divide-gray-300">
2  <span class="px-4 py-2">Home</span>
3  <span class="px-4 py-2">About</span>
4  <span class="px-4 py-2">Blog</span>
5  <span class="px-4 py-2">Contact</span>
6</div>
HomeAboutBlogContact

Divide Width

Control the thickness of dividers using width modifiers:

HTML
1<ul class="divide-y divide-y-2 divide-blue-300 bg-white rounded-lg max-w-sm">
2  <li class="py-3 px-4">Thin default (1px)</li>
3  <li class="py-3 px-4">Between items</li>
4  <li class="py-3 px-4">Last item</li>
5</ul>

Available widths: divide-y-0, divide-y (1px), divide-y-2, divide-y-4, divide-y-8. Same applies for divide-x.

  • divide-y (1px)
  • Between items
  • Last item
  • divide-y-2
  • Between items
  • Last item
  • divide-y-4
  • Between items
  • Last item

Divide Color

Apply any Tailwind color to your dividers:

HTML
1<ul class="divide-y divide-red-200 bg-white rounded-lg max-w-sm">
2  <li class="py-3 px-4">Red dividers</li>
3  <li class="py-3 px-4">Between each item</li>
4  <li class="py-3 px-4">Look clean</li>
5</ul>
  • divide-red-300
  • Red dividers
  • Third item
  • divide-emerald-300
  • Green dividers
  • Third item

Divide Style

Change the divider style to dashed, dotted, double, or none:

HTML
1<ul class="divide-y divide-dashed divide-gray-400 bg-white rounded-lg max-w-sm">
2  <li class="py-3 px-4">Dashed dividers</li>
3  <li class="py-3 px-4">Between items</li>
4  <li class="py-3 px-4">Last item</li>
5</ul>
  • divide-dashed
  • Dashed lines
  • Third item
  • divide-dotted
  • Dotted lines
  • Third item

Practical Pattern: Settings List

HTML
1<div class="max-w-md bg-white rounded-xl shadow-lg overflow-hidden">
2  <h3 class="font-bold text-lg px-5 pt-5 pb-3">Account Settings</h3>
3  <ul class="divide-y divide-gray-100">
4    <li class="flex items-center justify-between px-5 py-4 hover:bg-gray-50">
5      <div>
6        <p class="font-medium text-sm">Email Notifications</p>
7        <p class="text-gray-500 text-xs">Receive updates via email</p>
8      </div>
9      <span class="text-green-600 text-sm font-medium">On</span>
10    </li>
11    <li class="flex items-center justify-between px-5 py-4 hover:bg-gray-50">
12      <div>
13        <p class="font-medium text-sm">Two-Factor Auth</p>
14        <p class="text-gray-500 text-xs">Add an extra layer of security</p>
15      </div>
16      <span class="text-red-500 text-sm font-medium">Off</span>
17    </li>
18    <li class="flex items-center justify-between px-5 py-4 hover:bg-gray-50">
19      <div>
20        <p class="font-medium text-sm">Dark Mode</p>
21        <p class="text-gray-500 text-xs">Toggle dark color scheme</p>
22      </div>
23      <span class="text-green-600 text-sm font-medium">On</span>
24    </li>
25  </ul>
26</div>

Account Settings

  • Email Notifications

    Receive updates via email

    On

  • Two-Factor Auth

    Add an extra layer of security

    Off

  • Dark Mode

    Toggle dark color scheme

    On

Responsive Dividers

Apply different divide styles at different breakpoints:

HTML
1<div class="divide-y md:divide-y-0 md:divide-x md:flex divide-gray-300">
2  <div class="p-4 flex-1">Stacked on mobile</div>
3  <div class="p-4 flex-1">Side by side on desktop</div>
4  <div class="p-4 flex-1">With matching dividers</div>
5</div>
Stacked on mobile
Side by side on desktop
With matching dividers

Arbitrary Value Usage

Use arbitrary values for custom divide widths:

HTML
1<ul class="divide-y-[3px] divide-purple-300">
2  <li class="py-3 px-4">Custom 3px divider</li>
3  <li class="py-3 px-4">Between items</li>
4</ul>

Tailwind Divide Class Table

ClassProperties
divide-x-0border-left-width: 0px;
divide-xborder-left-width: 1px;
divide-x-2border-left-width: 2px;
divide-x-4border-left-width: 4px;
divide-x-8border-left-width: 8px;
divide-y-0border-top-width: 0px;
divide-yborder-top-width: 1px;
divide-y-2border-top-width: 2px;
divide-y-4border-top-width: 4px;
divide-y-8border-top-width: 8px;
divide-solidborder-style: solid;
divide-dashedborder-style: dashed;
divide-dottedborder-style: dotted;
divide-doubleborder-style: double;
divide-noneborder-style: none;

Worth Reading

Windframe Tailwind blocks

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates
Learn more about Windframe