Border Utilities
Border width, style, radius, and divide utilities for component styling.
Border Width
Control border thickness on all sides or individual sides.
Border Widths
border (1px)
border-2 (2px)
border-4 (4px)
border-8 (8px)
Individual Sides
Border Sides
border-top
border-right
border-bottom
border-left
Border Radius
Round corners with border radius utilities.
Border Radius
rounded-none
rounded-sm
rounded
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-full
Rounded Corners
Individual Corners
top-left
top-right
bottom-left
bottom-right
Border Style
Change border style with solid, dashed, or dotted variants.
Border Styles
Solid Border (default)
Dashed Border
Dotted Border
No Border
Divide
Add borders between child elements with divide utilities.
Divide Utilities
Ring (Outline)
Add focus rings and outlines with ring utilities.
Ring Utilities
Common Patterns
Card with Border Accent
Accent Border Card
Featured Item
A card with a colored left border for emphasis.
Rounded Button Group
Connected Buttons
List with Dividers
Divided List
Item Three
Description text
