Border Style

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

React props	CSS 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};`

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.

Edit this page on GitHub