Border Radius

Utilities for controlling the border radius of an element.

Rounded corners

Use borderRadius={radius} utility to apply different border radius sizes to an element.

<x.div borderRadius="sm" />
<x.div borderRadius />
<x.div borderRadius="md" />
<x.div borderRadius="lg" />

Pills and circles

Use borderRadius="full" utility to create pills and circles.

<x.div borderRadius="full" py={3} px={6}>
  Pill Shape
</x.div>
<x.div
  borderRadius="full"
  h={24}
  w={24}
  display="flex"
  alignItems="center"
  justifyContent="center"
>
  Circle
</x.div>

No rounding

Use borderRadius="none" to remove an existing border radius from an element.

This is most commonly used to remove a border radius that was applied at a smaller breakpoint.

<x.div borderRadius="none">none</x.div>

Rounding sides separately

Use borderRadius shorthands to only round one side an element.

<x.div borderRadius="lg lg 0 0" />
<x.div borderRadius="0 lg lg 0" />
<x.div borderRadius="0 0 lg lg" />
<x.div borderRadius="lg 0 0 lg" />

Rounding corners separately

Use borderRadius shorthands to only round one corner an element.

<x.div borderRadius="lg 0 0 0" />
<x.div borderRadius="0 lg 0 0" />
<x.div borderRadius="0 0 lg 0" />
<x.div borderRadius="0 0 0 lg" />

Responsive

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

<x.div borderRadius={{ md: 'lg' }}>{/* ... */}</x.div>

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

Customizing

Border Radii

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

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

  export const theme = {
    radii: {
      // ...
-     default: '0.25rem',
+     default: '5px',
+     xxl: '30px',
    },
  }