CSS outline ๐ CSS border
In this thread I will explain the difference and when to use which one๐งต
In this thread I will explain the difference and when to use which one๐งต
The following are the points of difference between the outline and border CSS properties :
1. Outline does not take spaces, whereas border does. i.e. If the size of a box is 200 x 300 and if you apply a 2px border, the box size will become 204 x 304 ( border on both sides ).
1. Outline does not take spaces, whereas border does. i.e. If the size of a box is 200 x 300 and if you apply a 2px border, the box size will become 204 x 304 ( border on both sides ).
2. We can use the border-radius property to round the corners. The outline does not support this.
But, firefox has -moz-outline-radius property. It allows rounded corners on the outline. This property is not defined in any CSS standard and is not supported by other browsers.
But, firefox has -moz-outline-radius property. It allows rounded corners on the outline. This property is not defined in any CSS standard and is not supported by other browsers.
3. The best thing about borders is, that we can change the properties like style, width, color, and radius of individual sides. This we can not do in outline.
4. Outline supports offset property which we can not use at the border.
Except Internet Explorer, all the other browsers support outline-offset.
Except Internet Explorer, all the other browsers support outline-offset.
5. Outlines may be non-rectangular in nature, unlike borders.
Well, this is the most confusing difference I came across. Let me try to explain this.
In border, if the box gets split over several lines, the browser just leaves the edges open because the box isn't closed.
Well, this is the most confusing difference I came across. Let me try to explain this.
In border, if the box gets split over several lines, the browser just leaves the edges open because the box isn't closed.
While the outline property takes edges into consideration.
If an outlined element spans several lines, the outline closes at the end of the line and reopens again on the next line.
If possible, the outline will stay fully connected as well, creating a non-rectangular shape.
If an outlined element spans several lines, the outline closes at the end of the line and reopens again on the next line.
If possible, the outline will stay fully connected as well, creating a non-rectangular shape.
6. Border is created inside the element, whereas outline is created outside the element( computed along with the width and height of the element )
Outlines are generally used to indicate focus or active states of the elements such as buttons, links, etc.
As they don't make layout changes, they are ideal for highlighting.
As they don't make layout changes, they are ideal for highlighting.
Thanks for reading this thread till the end ๐
๐Bookmark this thread for the future.
๐ Retweet the first tweet.
๐Follow @PriteshKiri for more daily web development tips and tricks
#codewithcoffee #codewithcoffeeindia
๐Bookmark this thread for the future.
๐ Retweet the first tweet.
๐Follow @PriteshKiri for more daily web development tips and tricks
#codewithcoffee #codewithcoffeeindia
Loading suggestions...