CSS: Outline

By Xah Lee. Date: . Last updated: .

outline is similar to border . The difference is, outline does not take up space.

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

CSS

Basics

Selectors

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc