CSS Remove Default Blue Border

Remove blue border from css custom-styled button in Chrome

Doing this is not recommended as it regresses the accessibility of your site; for more info, see this post.

That said, if you insist, this CSS should work:

button:focus {outline:0;}

Check it out or JSFiddle: http://jsfiddle.net/u4pXu/

Or in this snippet:

button.launch {

background-color: #F9A300;

border: none;

height: 40px;

padding: 5px 15px;

color: #ffffff;

font-size: 16px;

font-weight: 300;

margin-top: 10px;

margin-right: 10px;

}

button.launch:hover {

cursor: pointer;

background-color: #FABD44;

}

button.launch {

background-color: #F9A300;

border: none;

height: 40px;

padding: 5px 15px;

color: #ffffff;

font-size: 16px;

font-weight: 300;

margin-top: 10px;

margin-right: 10px;

}

button.launch:hover {

cursor: pointer;

background-color: #FABD44;

}

button.change {

background-color: #F88F00;

border: none;

height: 40px;

padding: 5px 15px;

color: #ffffff;

font-size: 16px;

font-weight: 300;

margin-top: 10px;

margin-right: 10px;

}

button.change:hover {

cursor: pointer;

background-color: #F89900;

}

button:active {

outline: none;

border: none;

}

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 

<button class="change">Change</button>

Remove input blue outline color

According to MDN

The outline CSS property is a shorthand to set various outline properties in a single declaration: outline-style, outline-width, and outline-color.

So when we set outline to none or 0, we are actually setting 3 properties

outline-style
outline-width
outline-color

This is obtain from chrome developer options:

outline:none; will set:

outline-color: initial;
outline-style: none;
outline-width: initial;

outline:0; will set:

outline-color: initial;
outline-style: initial;
outline-width: 0px;

In your case setting outline:none should do a trick.

Hope this helps. Happy Coding!!!

How do I remove blue selected outline on buttons?

That is a default behaviour of each browser; your browser seems to be Safari, in Google Chrome it is orange in color!

Use this to remove this effect:

button {
  outline: none; // this one
}

removing the blue borders in a summary element using css

To remove it from all inputs

input {
  outline: none;
}

To remove it from all tags use the universal selector *:

*:focus {
  outline: none;
}

How to remove blue border around the div

It's not a border, it's an outline. It appears only on certain browsers like Google Chrome. You can remove it using:

img{ outline: none; }

How do I remove the blue border that appears when clicking on a uib-accordion-heading?

Solution

:focus {outline:0 !important;}

This code all focus border remove.

How to remove focus border (outline) around text/input boxes? (Chrome)

This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:

textarea:focus, input:focus{
    outline: none;
}

You may want to add some other way for users to know what element has keyboard focus though for usability.

Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:

*:focus {
    outline: none;
}

⚠️ Accessibility warning

Please notice that removing outline from input is an accessibility bad practice. Users using screen readers will not be able to see where their pointer is focused at. More info at a11yproject

CSS remove hazy blue border from link in Chrome, prefer Firefox method

This effect is called the focus ring, and applies to any element that is given focus, either through a mouse click, a screen tap, or using the tab key on a keyboard.

This can be switched off in browsers by using the following:

a:focus, a:active {
    outline: none;
    -moz-outline-style: none;
}

Be aware that switching this off makes it harder for users with accessibility needs to be able to make their way through your page. You can therefore use this styling to switch from the browser's default behaviour, to something more in keeping with the look and feel of your site, while embracing an audience with differing needs of accessibility. For example:

a:focus, a:active {
    outline: 4px dotted white;
    -moz-outline-style: 4px dotted white;
}