CSS: Outline

By Xah Lee. Date: .

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

[see CSS: Border]

outline is shorthand for

Outline Basic Example

outline: solid 2px red;

Here's the code.

outline: solid 2px red;

Overlapping Outline

Here's example of overlapping outline.

ABC XYZ

Note, even the outlines have big thickness, but they don't take space, that's why they overlap.

Here's the code:

.outline-96123 {
outline: solid 20px rgb(255, 0, 0, 0.5);
}

.outline-05379 {
outline: solid 20px rgb(0, 255, 0, 0.5);
}

CSS Box Model

  1. CSS: Border
  2. CSS: Outline
  3. CSS: Margin vs Padding
  4. CSS: Box Sizing
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog