Outlines are useful debugging tools that allow us to see the dimensions and positions of boxes.
The outline property in CSS draws a line around the outside of an element. It’s similar to border except that:
- It always goes around all the sides, you can’t specify particular sides
- It’s not a part of the box model, so it won’t affect the position of the element or adjacent elements (nice for debugging!)
/* style */
outline: solid;
/* color | style */
outline: #f66 dashed;
/* style | width */
outline: inset thick;
/* color | style | width */
outline: green solid 3px;
/* Global values */
outline: inherit;
outline: initial;
outline: unset;This property is a shorthand for the following CSS properties: