CSS: Outline

Outline

outline is similar to border except:

• Outline does not take up space.
• Outline cannot be applied to just one side.

Outline syntax

outline: style width color

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

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