Remove the blue border outline from your webpage in Chrome with Bootstrap 4 / CSS

Hamburger Menu bar

Menu bar icon, animated to the crossbar.

While coding for my website, I found that whenever I am changing the browser size too small, it toggles to hamburger menu bar which has animation on click.

When I click on it, it animates and changes its shape to cross icon.

But it also shows up the blue border which I never added in my CSS. While testing in mobile browser or Safari browser in MAC OS, the same issue didn’t appear.

After some research, I found out the issue is only with Chrome and some version of the Firefox. Also, this issue can occur with anchor/link/input elements such as <a>,<button>, <input> show unexpected border when you clicked on the element.

How to change this issue with the help of CSS or Bootstrap?

The solution is adding “outline: none;” to the selector. And for Google Chrome if you’re using Bootstrap, then add !important after it to push your changes in the file due to overrule issue. And remember to define focus (: focus) styles for better accessibility.

btn:focus, a:focus
{
         outline: none;
}
.navbar-toggler:focus
{
         outline: none !important;
         box-shadow: none;
}

After the following changes, the issue was solved. You can find more info about outline and border here,

bootstrap button shows blue outline when clicked

Blue border on click in Chrome · Issue #1562 · kenwheeler/slick

Thanks for reading the article. Feel free to reach out to me for any inputs, feedback or call me out for coffee.