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