A border and an outline look very similar in CSS. However, they are totally different.
A border is a part of the box model of the element and therefore it is considered in the element’s total width and height. So it is always placed inside the element.
An outline on the other hand has nothing to do with the element’s size. Therefore, It is always placed outside the element’s boundaries. That is, if the element has a border around it, the outline will be placed outside of the border.
Getting confused? See this working example:
Example:
div{
border: 10px solid blue;
outline: 10px solid hotpink;
height: 200px;
width: 350px;
}
Other Key Differences
Like the element’s borders, outlines do not take up any space. It means that adding outlines to an element will have no impact on the surrounding elements except overlapping.
Whereas, when you add a border to an element, it can push its surrounding elements away from it. Which can impact the whole layout of the web page.
See this working example:
Example:
.div1:hover{
border: 5px solid blue;
}
.div2:hover{
outline: 5px solid red;
}
One more key difference between the border and outline is that an element can have different types of borders for all four edges whereas an outline is always the same for all four sides of the element.
Thanks for reading.
