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.

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

<ul class="divide-y divide-gray-200">
  <li class="py-3">First item</li>
  <li class="py-3">Second item</li>
  <li class="py-3">Third item</li>
</ul>

Preview

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

<div class="flex divide-x divide-gray-300">
  <span class="px-4 py-2">Home</span>
  <span class="px-4 py-2">About</span>
  <span class="px-4 py-2">Blog</span>
  <span class="px-4 py-2">Contact</span>
</div>

Preview

HomeAboutBlogContact

Divide Width

Control the thickness of dividers using width modifiers:

html

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

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

Preview

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

<ul class="divide-y divide-red-200 bg-white rounded-lg max-w-sm">
  <li class="py-3 px-4">Red dividers</li>
  <li class="py-3 px-4">Between each item</li>
  <li class="py-3 px-4">Look clean</li>
</ul>

Preview

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

<ul class="divide-y divide-dashed divide-gray-400 bg-white rounded-lg max-w-sm">
  <li class="py-3 px-4">Dashed dividers</li>
  <li class="py-3 px-4">Between items</li>
  <li class="py-3 px-4">Last item</li>
</ul>

Preview

divide-dashed
Dashed lines
Third item

divide-dotted
Dotted lines
Third item

Practical Pattern: Settings List

html

<div class="max-w-md bg-white rounded-xl shadow-lg overflow-hidden">
  <h3 class="font-bold text-lg px-5 pt-5 pb-3">Account Settings</h3>
  <ul class="divide-y divide-gray-100">
    <li class="flex items-center justify-between px-5 py-4 hover:bg-gray-50">
      <div>
        <p class="font-medium text-sm">Email Notifications</p>
        <p class="text-gray-500 text-xs">Receive updates via email</p>
      </div>
      <span class="text-green-600 text-sm font-medium">On</span>
    </li>
    <li class="flex items-center justify-between px-5 py-4 hover:bg-gray-50">
      <div>
        <p class="font-medium text-sm">Two-Factor Auth</p>
        <p class="text-gray-500 text-xs">Add an extra layer of security</p>
      </div>
      <span class="text-red-500 text-sm font-medium">Off</span>
    </li>
    <li class="flex items-center justify-between px-5 py-4 hover:bg-gray-50">
      <div>
        <p class="font-medium text-sm">Dark Mode</p>
        <p class="text-gray-500 text-xs">Toggle dark color scheme</p>
      </div>
      <span class="text-green-600 text-sm font-medium">On</span>
    </li>
  </ul>
</div>

Preview

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

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

Preview

Stacked on mobile

Side by side on desktop

With matching dividers

Arbitrary Value Usage

Use arbitrary values for custom divide widths:

html

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

Tailwind Divide Class Table

Class	Properties
divide-x-0	border-left-width: 0px;
divide-x	border-left-width: 1px;
divide-x-2	border-left-width: 2px;
divide-x-4	border-left-width: 4px;
divide-x-8	border-left-width: 8px;
divide-y-0	border-top-width: 0px;
divide-y	border-top-width: 1px;
divide-y-2	border-top-width: 2px;
divide-y-4	border-top-width: 4px;
divide-y-8	border-top-width: 8px;
divide-solid	border-style: solid;
divide-dashed	border-style: dashed;
divide-dotted	border-style: dotted;
divide-double	border-style: double;
divide-none	border-style: none;

Worth Reading

Tailwind Border Width - Manual border approach
MDN: border-width - CSS fundamentals

Windframe Tailwind blocks

Landing page

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

Build Stunning Tailwind UIs 10x faster

Visit Windframe →