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

JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc