'Cannot remove bootstrap button border

I have a custom bootstrap button and I cannot remove its border after click. I was able to change its background color but there is an insistent blue border boring me.

I click on it, it opens a modal window and after closing the modal the border is still there until I click on another part of the page even if I change values in :active and :focus.

enter image description here

html:

<button id="openPopup" type="button" class="btn btn-primary btn-lg text-uppercase" data-toggle="modal" data-target="#myModal">
    some text here
</button>

css:

#openPopup {
  padding: 20px 30px;
  background-color: #a2238e;
  border-color: #a2238e;
  box-shadow: 1px 1px 1px #999;
  white-space: normal;
  font-size: smaller;
  letter-spacing: 0.2px;
}

#openPopup:hover, #openPopup:active, #openPopup:focus {
  background-color: #912284 !important;
  border-color: #912284 !important;
}
javascriptjqueryhtmlcss


Solution 1:[1]

Try this

#openPopup:focus {
    outline: none;
}

or

#openPopup:focus {
    outline: 0;
}

Solution 2:[2]

On Bootstrap 4.5.0 you can try

<button class="btn btn-primary shadow-none">ADD TEXT HERE</button>

It works for me.

Solution 3:[3]

Try This

<button type="button" class="btn btn-link">Link</button> Bootstrap

Solution 4:[4]

Try this

#openPopup { outline:none; border-style: none; }

#openPopup:hover, #openPopup:active, #openPopup:focus { outline: none; border-style: none; }

Solution 5:[5]

This works for me on Bootstrap 4.6.0

#openPopup {
    border: none;
    box-shadow: none;
}

Solution 6:[6]

This worked for me on bootstrap 5.

style="border-radius: 0em;"

Solution 7:[7]

#openPopup add box-shadow: none; like this

Solution 8:[8]

Try this:

just add shadow-none class next to the btn-primary class

<button class="btn btn-primary shadow-none>some text</button>

Solution 9:[9]

Try removing the border on :focus and :active

#openPopup:active, #openPopup:focus { 
   border-style: none !important;
}

Related Questions