Border Color

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

All sides

Use borderColor={color} utilities to set the border color for all sides of an element.

<x.input border={2} borderColor="red-600" />

Individual sides

Use borderColor={color} utilities to set the border color for individual sides of an element.

<x.input border={2} borderColor="indigo-500 emerald-500 purple-500 red-500" />

Changing opacity

Use color alpha variants to choose another opacity.

<x.input border={2} borderColor="indigo-600-a50" />

Responsive

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

<x.div borderColor={{ md: 'red-500' }}>{/* ... */}</x.div>

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

Customizing

Colors

If you'd like to customize your values for kind of colors, use the theme.colors section of your theme.

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

  export const theme = {
    colors: generateHexAlphaVariants({
      // ...
+     'deep-blue': '#00008b',
+     'primary': th.color('red-600'),
    }),
  }