Divide Color

Utilities for controlling the border color between elements.

React propsCSS Properties
divideColor={color}border-color: {color};


Control the border color between elements using the divideColor={color} utility.

<x.div divideX divideColor="fuchsia-500"> <div>1</div> <div>2</div> <div>3</div> </x.div>

Changing opacity

Use color alpha variants to choose another opacity.

<x.div divideX divideColor="light-blue-500-a50"> <div>1</div> <div>2</div> <div>3</div> </x.div>


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

<x.div divideColor={{ md: 'red-500' }}>{/* ... */}</x.div>

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

Edit this page on GitHub