Divide Width

Utilities for controlling the border width between elements.

Add borders between horizontal children

Add borders between horizontal elements using the divideX={size} utilities.

<x.div
  display="grid"
  gridTemplateColumns={3}
  divideX
  divideColor="emerald-500"
>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Add borders between between stacked children

Add borders between stacked elements using the divideY={size} utilities.

<x.div display="grid" gridTemplateColumns={1} divideY divideColor="amber-500">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Reversing children order

If your elements are in reverse order (using say flexDirection="row-reverse" or flexDirection="column-reverse"), use the divideXReverse or divideYReverse utilities to ensure the border is added to the correct side of each element.

<x.div
  display="flex"
  flexDirection="column-reverse"
  divideY
  divideYReverse
  divideColor="rose-500"
>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Responsive

To control the borders between elements at a specific breakpoint, use responsive object notation. For example, adding the property divideY={{ md: 2 }} to an element would apply the divideY={2} utility at medium screen sizes and above.

<x.div divideY={{ md: 2 }}>{/* ... */}</x.div>

For more information about xstyled's responsive design features, check out Responsive Design documentation.