The outline property – CSS Basic User Interface Module (Part 2)
The outline property is used to draw a line around boxes in CSS. It is similar to a border. Unlike a border, its presence does not add to the size of the element nor push other elements around. Rather, it is painted around and in front of the element and has no impact on sizing or positioning. We saw it as a thin green line in the graphic in the previous post:
Let’s play around with it some more. Normally, outlines are for the focus state. Here is a slightly exaggerated example of how that looks when an input field receives the focus.
Space can be put between the outline and the element using the outline-offset property:
Style and color are available using properties outline-style and outline-color.