- Outlines do not take up space.
- Border takes up space outside the element.
- Outlines may be non-rectangular.
- Outline is better to enclose potential overflowing child elements, especially into an inline container.
- Border is much more adapted for block-behaving elements.
- 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;
}
Top comments (2)
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🤓
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! :)