CSS: Outline
outline
is similar to
border
. The difference is, outline does not take up space.
outline
is shorthand for
outline-style
outline-width
outline-color
Outline Basic Example
xyz
outline: solid 2px red;
Overlapping Outline
Here is example of overlapping outline of red and blue, half opacity.
ABC
XYZ
.outline45928 { outline: solid 10px rgb(255, 0, 0, 0.5); } .outline64668 { outline: solid 10px rgb(0, 255, 0, 0.5); }
Note, even the outlines have big thickness, but they don't take space, that's why they overlap.