Framing
Borders, Outlines and Rings
Border
- Rendered inside element box
- Border width doesn't change element size
- Tailwind element default -
box-sizing: border-box
Outline
- Rendered outside element
Ring
- Uses
box-shadow - Can set opacity: `ring-red-500/50
- Renders outisde the element
ring-inset- render within the border
- allowed to overlap element content