Divide Style

Utilities for controlling the border style between elements.

Usage

Control the border style between elements using the divideStyle={borderStyle} utility.

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

Responsive

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

<x.div divideStyle={{ md: 'dashed' }}>{/* ... */}</x.div>

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