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

outline: solid 2px red;

Overlapping Outline

Here is example of overlapping outline of red and blue, half opacity.

.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.