In the previous CSS Borders chapter we saw how borders affect the width and height of an element and hence the layout of a webpage together with looking at some examples of how to use them. We even saw how to round borders using the border-radius property.
Talking about outlines, they differ from borders in that they DON'T affect the dimensions of an element and hence the layout of a webpage.
Everything else is almost the same.
We have an outline property taking three paramters for width, style and color respectively just like border.
Just like with borders, we have seperate properties for outlines too - outline-width, outline-style and outline-color.
However unfortunately, we can't get different sides of outlines styled differently - there is no property like outline-left, or outline-top and to change the left or top outlines.
And with all this information in place we can now see a few examples.
A 1px solid black outline:
p {
outline: 1px solid black;
}A paragraph
A 2px dashed orange outline:
p {
outline: 2px dashed orange;
}A paragraph
Differentiating between borders and outlines. Consider the following example with a 20px border.
p {
border: 20px solid #ddd;
}A paragraph
And now consider the following with the same 20px width of outlines.
p {
outline: 20px solid #ddd;
}A paragraph
Notice how the outlines go out of the surrounding box. This is the difference between them and borders.
And with this we are good to go with CSS outlines! Goodluck outlining elements.
