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-8outline(2px solid current color)outline-none(hide outline)
🎨 Outline Color
Control the color of an element's outline:
- Any Tailwind color:
outline-blue-500 - Opacity:
outline-blue-500/50
✏️ Outline Style
Control the style of an element's outline:
outline-solidoutline-dashedoutline-dottedoutline-double
↔️ 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
🧠 Test Your Knowledge
3 QuestionsProgress: 0 / 3
Keep Going!Tailwind CSS - Ring