CSS: Outline

By Xah Lee. Date: . Last updated: .

outline is similar to border except:

syntax:

outline: style width color

it is shorthand for

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.

Box Model