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.

<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