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);
}

Box Model, Width, Padding, Margin, Border

  1. CSS: Border
  2. CSS: Outline
  3. CSS: Margin vs Padding
  4. CSS: Box Sizing
Liket it? 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 Reference
  5. DOM
  6. SVG
  7. Web Dev Blog