Border Color

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

React propsCSS Properties
borderColor={color}border-color: {color};
borderTopColor={color}border-top-color: {color};
borderRightColor={color}border-right-color: {color};
borderBottomColor={color}border-bottom-color: {color};
borderLeftColor={color}border-left-color: {color};

All sides

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

<> <template preview> <x.div display="flex" alignItems="center" justifyContent="center"> <x.input placeholder="Your email" p={3} border={2} borderColor="red-600" outline={{ focus: 'none' }} borderRadius="md" /> </x.div> </template> <x.input border={2} borderColor="red-600" /> </>

Individual sides

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

<> <template preview> <x.input placeholder="Your email" p={3} border={2} borderColor="indigo-500 emerald-500 purple-500 red-500" outline={{ focus: 'none' }} borderRadius="md" /> </template> <x.input border={2} borderColor="indigo-500 emerald-500 purple-500 red-500" /> </>

Changing opacity

Use color alpha variants to choose another opacity.

<> <template preview> <x.div display="flex" alignItems="center" justifyContent="center"> <x.input placeholder="Your email" p={3} border={2} borderColor="indigo-600-a50" outline={{ focus: 'none' }} borderRadius="md" /> </x.div> </template> <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'),
    }),
  }
Edit this page on GitHub