Border Style

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

Usage

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" />

Responsive

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.