CSS: Outline
outline
is similar to
border
except:
- Outline does not take up space.
- Outline cannot be applied to just one side.
syntax:
outline: style width color
it 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
.out879 { outline: solid 10px rgb(255, 0, 0, 0.5); } .out249 { 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.