Divide Width

Utilities for controlling the border width between elements.

React propsCSS Properties
divideX={size}--x-divide-x-reverse: 0;
border-right-width: calc({size} * var(--x-divide-x-reverse));
border-left-width: calc({size} * calc(1 - var(--x-divide-x-reverse)));
divideXReverse--x-divide-x-reverse: 1;
divideY={size}--x-divide-y-reverse: 0;
border-top-width: calc({size} * calc(1 - var(--x-divide-y-reverse)));
border-bottom-width: calc({size} * var(--x-divide-y-reverse));
divideYReverse--x-divide-y-reverse: 1;

Add borders between horizontal children

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

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

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

<> <template preview> <x.div display="flex" flexDirection="column-reverse" divideY divideYReverse divideColor="rose-500" > <x.div textAlign="center" fontWeight="extrabold" fontSize="2xl" color="rose-600" py={3} > 1 </x.div> <x.div textAlign="center" fontWeight="extrabold" fontSize="2xl" color="rose-600" py={3} > 2 </x.div> <x.div textAlign="center" fontWeight="extrabold" fontSize="2xl" color="rose-600" py={3} > 3 </x.div> </x.div> </template> <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.

Edit this page on GitHub