How can I remove this weird outline around my element?

October 26, 2023

I am getting a weird outline like something around my button for this styles. Why is it happening.
Below is the code:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Button</title>
        <style>
          button {
            padding: 1em;
            background: transparent;
            border: none;
          }
          button:focus {
            border-radius: 6px;
            outline: none;
            box-shadow: 0 0 0 2px white, 0 0 0 4px blue;
          }
        </style>
      </head>
      <body>
        <button>Button</button>
      </body>
    </html>

>Solution :

If for some specific design reason, @Yuvaraj M’s answer doesn’t cover your case, consider using inset shadow for the white part.

button {
  padding: 1em;
  background: transparent;
  border: none;
}

button:focus {
  border-radius: 6px;
  outline: none;
  box-shadow: inset 0 0 0 2px white, 0 0 0 2px blue;
}