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.

#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;
}

<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

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

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.

#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;
}

<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

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

• javascript
• jquery
• html
• css

• 2 You are probably looking for outline, not border. However, consider this: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators – Felix Kling Commented Apr 14, 2018 at 21:09

11 Answers 11

On Bootstrap 4.5.0 you can try

<link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

It works for me.

<link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

Try This

Bootstrap

for Bootstrap 4:

Use can use border-0 utility class to remove border from elements like buttons:

<button class="btn btn-primary border-0">Button</button>

Try this

#openPopup:focus {
    outline: none;
}

or

#openPopup:focus {
    outline: 0;
}

Try this:

Just add shadow-none class next to the btn-primary class.

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

Try this

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

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

This works for me on Bootstrap 4.6.0

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

Try removing the border on :focus and :active

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

This worked for me on bootstrap 5.

style="border-radius: 0em;"

#openPopup add box-shadow: none;

CodePen demo

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