Understanding Outlines in CSS, overwriting browser defaults.

You might have noticed that in newer versions of web browsers there is this dark outline in forms, buttons after they are clicked and many more, Now what are those things, why are they there and how can you remove them? (cause to be sincere these aren't beautiful)

It usually shows when it's focused, or active. (Pseudo selector for focus, :focus) And Focus has this outline property it's the browser defaults.
The outline is comparable to a border but it's not part of the box model, It is like a lighter version of the border.

You can style it with the outline property.
To remove it, outline: none;
It's usually displayed when the element is focused so use the focus Pseudo class
button:focus {
outline: none;
}

You can set the outline to a different look maybe its width, its color too, you can also add a border-radius to it too and also make it like a normal border

see MDN For a complete reference of what you can set with the outline https://developer.mozilla.org/en-US/docs/Web/CSS/outline

With that, you have full access to your input or button outline and remove ugly outlines by the browser defaults. Now go give that outline a great look