Nearby lessons

55 of 61

🔳 Tailwind CSS - Outline (Width, Color, Style & Offset)

📖 Overview

Outline utilities control the appearance of an element's outline, which is drawn outside the border edge.

📏 Outline Width

Control the width of an element's outline:

  • outline-0, outline-1, outline-2, outline-4, outline-8
  • outline (2px solid current color)
  • outline-none (hide outline)
🌀

tailwind Designer

Live Component Playground

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

🎨 Outline Color

Control the color of an element's outline:

  • Any Tailwind color: outline-blue-500
  • Opacity: outline-blue-500/50
🌀

tailwind Designer

Live Component Playground

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

✏️ Outline Style

Control the style of an element's outline:

  • outline-solid
  • outline-dashed
  • outline-dotted
  • outline-double
🌀

tailwind Designer

Live Component Playground

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

↔️ Outline Offset

Control the distance between the outline and the border edge:

  • outline-offset-0, outline-offset-1, outline-offset-2, outline-offset-4, outline-offset-8
🌀

tailwind Designer

Live Component Playground

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

🧠 Test Your Knowledge

3 Questions

Progress: 0 / 3
Keep Going!Tailwind CSS - Ring