🖼️ Tailwind CSS - Border (Radius, Width, Color & Style)

Tailwind provides complete border utilities for controlling border radius, width, color, and style on any side of an element.

Control the border radius (rounded corners) of an element:

• rounded-none, rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, rounded-full
• Specific sides: rounded-t-lg, rounded-r-lg, rounded-b-lg, rounded-l-lg
• Specific corners: rounded-tl-lg, rounded-tr-lg, rounded-br-lg, rounded-bl-lg

Control the border width of an element:

• border-0, border-2, border-4, border-8, border (1px)
• Specific sides: border-t-4, border-r-4, border-b-4, border-l-4
• Specific axis: border-x-4, border-y-4

Control the border color of an element:

• Any Tailwind color: border-blue-500, border-red-600
• Opacity: border-blue-500/50

Control the border style of an element:

• border-solid (default)
• border-dashed
• border-dotted
• border-double
• border-none