Chakra-UI

I♥️Components

Borders

|

Chakra Docs

|

⦾ Chakra UI makes it easy to style elements with borders, offering a flexible, prop-based interface for defining the style, width, and color of borders.

The primary properties for controlling borders in Chakra UI are:

  • borderWidth: This is used to set the width of the border. It can take values such as sm, md, lg which map to predefined sizes, or you can specify the width directly in pixels.
  • borderStyle: This property determines the style of the border. Options include solid, dashed, dotted, and more.
  • borderColor: This property sets the color of the border. It can accept color values in various formats (named CSS colors, RGB, HEX, etc), and you can also use the color tokens defined in your theme.
  • borderRadius: This controls the roundness of the borders. Like borderWidth, it can take predefined sizes (sm, md, lg, etc) or direct values in pixels. See this property more in depth in the Border Radius section.

In addition to these, Chakra UI provides shorthand props that combine border style, width, and color. They use the format border[Side][Width][Color]. For example,

To import the Box component used below:

Examples

Have you ever seen such a box?

Whaddabox!

Dashes are grand!

Lovely in Red!

Did you know?

Creative Idea No. 1

Composite Border Styles: You can give individual sides of a component different borders by specifying borderTop, borderRight, borderBottom, and borderLeft separately. For example,
I am a Box.

Code

Creative Idea No. 2

Transparent Borders: Chakra UI allows you to create transparent borders. You can do this by setting the borderColor to transparent. This can be useful when you want an element to maintain the same layout even when its border is invisible.
I am a box with a transparent border.

Code

Creative Idea No. 3

Responsive Borders: Chakra UI allows you to define responsive border styles. This means you can specify different border styles for different viewport sizes. You can do this by providing an array of values to the border properties. For example, the following sets a 1px border on the smallest viewports, 2px on medium-sized viewports, and 3px on the largest viewports.
My name is Boxanne.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.