Nearby lessons
53 of 61🖼️ Tailwind CSS - Border (Radius, Width, Color & Style)
📖 Overview
Tailwind provides complete border utilities for controlling border radius, width, color, and style on any side of an element.
⭕ Border Radius
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
📏 Border Width
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
🎨 Border Color
Control the border color of an element:
- Any Tailwind color:
border-blue-500,border-red-600 - Opacity:
border-blue-500/50
✏️ Border Style
Control the border style of an element:
border-solid(default)border-dashedborder-dottedborder-doubleborder-none
🧠 Test Your Knowledge
4 QuestionsProgress: 0 / 4
Keep Going!Tailwind CSS - Divide