Border Utilities

Control borders, dividers, and outlines.

Border Width

Control the thickness of borders.

Available classes:

• sb-border: 1px border
• sb-border-0: No border
• sb-border-2: 2px border
• sb-border-4: 4px border
• sb-border-8: 8px border

Individual sides:
- sb-border-t-{size}: Top
- sb-border-r-{size}: Right
- sb-border-b-{size}: Bottom
- sb-border-l-{size}: Left

Border Style

Control the style of borders.

Available classes:

• sb-border-solid: Solid line
• sb-border-dashed: Dashed line
• sb-border-dotted: Dotted line
• sb-border-double: Double line
• sb-border-none: No border

Border Radius

• sb-border-radius-none: 0
• sb-border-radius-sm: 0.125rem
• sb-border-radius: 0.25rem
• sb-border-radius-md: 0.375rem
• sb-border-radius-lg: 0.5rem
• sb-border-radius-xl: 0.75rem
• sb-border-radius-2xl: 1rem
• sb-border-radius-3xl: 1.5rem
• sb-border-radius-full: 9999px

Border Color

Control the color of borders.

Available classes:

• sb-border-black: A black border
• sb-border-white: A white border
• sb-border-primary: Theme primary color
• sb-border-secondary: Theme secondary color
• sb-border-accent: Theme accent color
• sb-border-neutral: Theme neutral color
• sb-border-info: Theme info color
• sb-border-success: Theme success color
• sb-border-warning: Theme warning color
• sb-border-error: Theme error color
• sb-border-transparent: Transparent border

Each color has a corresponding opacity variant:

• sb-border-color-25: 25% opacity
• sb-border-color-50: 50% opacity
• sb-border-color-75: 75% opacity

Continue to Color Utilities