Borders are always solid with a default border color. You can control the position, radius, and color of borders.
Border position
Border radius
Border width
Border color
CSS variables
| --border-width-1 | 1px |
| --border-width-2 | 2px |
| --border-width-3 | 3px |
| --border-width-4 | 4px |
| --border-radius-1 | 2px |
| --border-radius-2 | 4px |
| --border-radius-3 | 8px |
| --border-radius-4 | 16px |
| --border-radius-full | 9999px |
Component props
| border | Responsive<boolean | "top" | "right" | "bottom" | "left"> |
| borderWidth | Responsive<"1" | "2" | "3" | "4"> |
| borderRadius | Responsive<"1" | "2" | "3" | "4" | "full"> |
| borderColor | Responsive<BorderColor> |