Chakra-UI

I♥️Components

Border Radius

|

Chakra Docs

|

⦾ In Chakra UI, the border radius of a component can be easily manipulated using the borderRadius property. This property accepts both specific pixel values and predefined keyword values that correspond to specific pixel measurements.

The predefined keyword values are as follows:

  • none: translates to 0
  • sm: translates to 2px
  • base or md: translates to 4px
  • lg: translates to 8px
  • xl: translates to 12px
  • 2xl: translates to 16px
  • 3xl: translates to 24px
  • full or max: translates to 9999px

To import the Button, Flex, and Box components:

Examples

Button with LeftRadius="0", creating no border radius on left, but default settings on right.

Button with TopRadius="0", creating no border radius on top, but default settings on bottom.

Button with borderBottomRadius="0", creating no border radius on bottom, but default settings on top.

Diagonal split view: You can use borderRadius property to create a visually interesting diagonal split view effect. By applying a large border radius to only two corners of a box and giving it a linear gradient, you can create a box that looks like it's been cut diagonally

Diagonal Split View Box

Did you know?

Creative Idea No. 1

Individual Corner Radius: you can also adjust the border radius of individual corners using the borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, and borderBottomLeftRadius props. In this example, the border radius is set individually for the top left and bottom right corners.
I'm a box with different border radii on different corners.

Code

Creative Idea No. 2

Radius with Themes: you can define custom radius values in your theme and use them throughout your app.
I'm a box with a super rounded border.

Code

Creative Idea No. 3

Ellipse Borders: you can create elliptical borders by applying a large border radius only to the horizontal or vertical axis of a box. In this example, the border radius is applied differently to the horizontal and vertical axes, creating an ellipse effect.
I'm a box with an elliptical border radius.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.