Border Width

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

All sides

Use borderWidth={size} utilities to set the border width for all sides of an element.

<x.div borderWidth={0} borderStyle="solid" borderColor="indigo-600" />
<x.div borderWidth borderStyle="solid" borderColor="indigo-600" />
<x.div borderWidth={2} borderStyle="solid" borderColor="indigo-600" />
<x.div borderWidth={4} borderStyle="solid" borderColor="indigo-600" />
<x.div borderWidth={8} borderStyle="solid" borderColor="indigo-600" />

Individual sides

Use borderWidth={size} utilities to set the border width for one side of an element.

<x.div borderWidth="2 0 0 0" borderStyle="solid" borderColor="indigo-600" />
<x.div borderWidth="0 2 0 0" borderStyle="solid" borderColor="indigo-600" />
<x.div borderWidth="0 0 2 0" borderStyle="solid" borderColor="indigo-600" />
<x.div borderWidth="0 0 0 2" borderStyle="solid" borderColor="indigo-600" />

Between elements

You can also add borders between child elements using the divide{X,Y}={width} and divideColor={color} utilities.

<x.div divideY divideColor="light-blue-400">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Learn more in the Divide Width and Divide Color documentation.

Responsive

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

<x.div borderWidth={{ md: 2 }}>{/* ... */}</x.div>

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

Customizing

Border Widths

If you'd like to customize your values for border widths, use the theme.borderWidths section of your theme.

  // theme.js
  import { th } from '@xstyled/styled-components'

  export const theme = {
    radii: {
      // ...
-     default: '1px',
+     default: '2px',
    },
  }