Border & Radius

Border#

When designing with borders, prioritize using these 3 border tokens: 1, 2 or 4px.

bordervaluepx
none00
1px1px solid1px
2px2px solid2px
4px4px solid4px

When coding, use the properties below:

PropCSS PropertyTheme Field
borderborderborders
borderWidthborder-widthborderWidths
borderStyleborder-styleborderStyles
borderColorborder-colorcolors
borderTopborder-topborders
borderTopWidthborder-top-widthborderWidths
borderTopStyleborder-top-styleborderStyles
borderTopColorborder-top-colorcolors
borderRightborder-rightborders
borderRightWidthborder-right-widthborderWidths
borderRightStyleborder-right-styleborderStyles
borderRightColorborder-right-colorcolors
borderBottomborder-bottomborders
borderBottomWidthborder-bottom-widthborderWidths
borderBottomStyleborder-bottom-styleborderStyles
borderBottomColorborder-bottom-colorcolors
borderLeftborder-leftborders
borderLeftWidthborder-left-widthborderWidths
borderLeftStyleborder-left-styleborderStyles
borderLeftColorborder-left-colorcolors
borderXborder-left , border-rightborders
borderYborder-top , border-bottomborders

Border Radius#

When designing with radius, keep in mind that the more rounded the corners of an element are, the more light and fun will be the look & feel. For small components such as buttons, badges and small cards, use border radius only till lg.

radiusvaluepx
none00px
sm0.125rem2px
md0.25rem4px
lg0.5rem8px
xl0.75rem12px
2xl1rem16px
full9999pxheight/2

When coding, use the properties below:

PropCSS PropertyTheme Field
borderRadiusborder-radiusradii
borderTopLeftRadiusborder-top-left-radiusradii
borderTopRightRadiusborder-top-right-radiusradii
borderBottomRightRadiusborder-bottom-right-radiusradii
borderBottomLeftRadiusborder-bottom-left-radiusradii
borderTopRadiusborder-top-left-radius & border-top-right-radiusradii
borderRightRadiusborder-top-right-radius & border-bottom-right-radiusradii
borderBottomRadiusborder-bottom-left-radius & border-bottom-right-radiusradii
borderLeftRadiusborder-top-left-radius & border-bottom-left-radiusradii
Edit this page

Made byChakraandRock Content