Border Style

Utilities for controlling the style of an element's borders.

React propsCSS Properties
borderStyle={style}border-style: {style};
borderTopStyle={style}border-top-style: {style};
borderRightStyle={style}border-right-style: {style};
borderBottomStyle={style}border-bottom-style: {style};
borderLeftStyle={style}border-left-style: {style};


Use borderStyle={style} to control an element's border style.

<> <template preview> <x.div display="grid" gap={2} gridTemplateColumns={{ sm: 2, lg: 5 }}> {['solid', 'dashed', 'dotted', 'double', 'none'].map((borderStyle) => ( <x.div p={6} bg="red-300" color="white" textAlign="center" fontWeight="extrabold" display="flex" alignItems="center" justifyContent="center" borderStyle={borderStyle} borderColor="red-600" borderWidth={3} > {borderStyle} </x.div> ))} </x.div> </template> <x.div borderWidth={3} borderStyle="solid" /> <x.div borderWidth={3} borderStyle="dashed" /> <x.div borderWidth={3} borderStyle="dotted" /> <x.div borderWidth={3} borderStyle="double" /> <x.div borderWidth={3} borderStyle="none" /> </>


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

<x.div borderStyle={{ md: 'solid' }}>{/* ... */}</x.div>

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

Edit this page on GitHub