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
🌀

tailwind Designer

Live Component Playground

html Source
Loading...
Built with Tailwind CSS • Instant Reflection

📏 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
🌀

tailwind Designer

Live Component Playground

html Source
Loading...
Built with Tailwind CSS • Instant Reflection

🎨 Border Color

Control the border color of an element:

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

tailwind Designer

Live Component Playground

html Source
Loading...
Built with Tailwind CSS • Instant Reflection

✏️ Border Style

Control the border style of an element:

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

tailwind Designer

Live Component Playground

html Source
Loading...
Built with Tailwind CSS • Instant Reflection

🧠 Test Your Knowledge

4 Questions

Progress: 0 / 4
Keep Going!Tailwind CSS - Divide