Detailed description of the difference between border and outline

Border supports Box-sizing:border-box, when there is a margin, is added when the border is processed according to the previous margin

Outline does not support Box-sizing:border-box; handles margins first, then outlines, somewhat like zooming (Transform:scale (1.2);) regardless of the outline size style does not affect the layout.

A summary of the difference between outline and border

Border can be applied to almost all tangible HTML elements, while outline is designed for elements such as links, form controls, and ImageMap. Thus another difference can be inferred, that is: the effect of outline will automatically appear with the focus of the element, corresponding to the blur and automatically disappear. These are the default behavior of the browser, without the need for JavaScript to be controlled with CSS.