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:
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3