DEV Community

Sujit Agarwal
Sujit Agarwal

Posted on

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.

Alt Text

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]
Enter fullscreen mode Exit fullscreen mode

Syntax for BORDER:

border: [width] [style] [color]
Enter fullscreen mode Exit fullscreen mode

Code Example :

#border {
    border: 10px solid black;
}
#outline {
    outline: 10px solid black;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
tinegagideon profile image
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đŸ¤“

Collapse
 
sujitagarwal profile image
Sujit Agarwal • Edited

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! :)