Skip to Content

Borders

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

Component props

NameTypeValues
borderResponsive<Border>true | "top" | "right" | "bottom" | "left" | "none"
borderWidthResponsive<BorderWidth>"sm" | "md" | "lg" | "xl"
borderRadiusResponsive<BorderRadius>true | "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"
borderColorBorderColorSemanticColor | ColorName | TailwindColor