QuickTip: CSS Borders v/s Outline

1. Outlines do not take up space.
2. Border takes up space outside the element.
3. Outlines may be non-rectangular.
4. Outline is better to enclose potential overflowing child elements, especially into an inline container.
5. Border is much more adapted for block-behaving elements.
6. Outline can be used to debug CSS code, since it isn't a part of element's dimensions.

The syntax for creating an outline is the same as for creating a border. The shorthand takes three values: the width of the line, the style of the line, and the color of the line.

Syntax for OUTLINE:

outline: [width] [style] [color]

Syntax for BORDER:

border: [width] [style] [color]

Code Example :

#border {
    border: 10px solid black;
}
#outline {
    outline: 10px solid black;
}

Comments

[tinega]

It's also important to mention that outline can be used to debug CSS code,since it isn't a part of element's dimensions🤓

[Sujit Agarwal]

How did I miss that...! Nice that you spotted it.
I use this trick every day at work, but missed out on mentioning it.

Edited the post! :)