Divide Color

Utilities for controlling the border color between elements.

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

Usage

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

<> <template preview> <x.div display="grid" gridTemplateColumns={3} divideX divideColor="fuchsia-500" > <x.div textAlign="center" fontWeight="extrabold" fontSize="2xl" color="fuchsia-600" px={6} > 1 </x.div> <x.div textAlign="center" fontWeight="extrabold" fontSize="2xl" color="fuchsia-600" px={6} > 2 </x.div> <x.div textAlign="center" fontWeight="extrabold" fontSize="2xl" color="fuchsia-600" px={6} > 3 </x.div> </x.div> </template> <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.

<> <template preview> <x.div display="grid" gridTemplateColumns={3} divideX divideColor="light-blue-500-a50" > <x.div textAlign="center" fontWeight="extrabold" fontSize="2xl" color="light-blue-600" px={6} > 1 </x.div> <x.div textAlign="center" fontWeight="extrabold" fontSize="2xl" color="light-blue-600" px={6} > 2 </x.div> <x.div textAlign="center" fontWeight="extrabold" fontSize="2xl" color="light-blue-600" px={6} > 3 </x.div> </x.div> </template> <x.div divideX divideColor="light-blue-500-a50"> <div>1</div> <div>2</div> <div>3</div> </x.div> </>

Responsive

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