border can be applied to almost all tangible html elements, while outline is designed for elements such as links, form controls and ImageMap .
The effect of outline will automatically appear with the focus of the element, and the corresponding will disappear automatically with the blur . These are the default behaviors of the browser and do not require JavaScript and CSS to control. outline does not affect the size of elements like border Or location.
Using input:focus{outline:none;} can achieve the effect that the border does not change blue when the “input box” gets the focus. This effect can also be used on buttons, button:focus{outline:none;}.
But under Firefox, for the button element, even if the outline is set, it will still A dotted line appears. You can use a Firefox private pseudo-element:
button:-moz-focus-inner{border :0;},
Pay special attention to the fact that -moz-focus-inner sets the border instead of the outline.