How to change border radius of bootstrap modal?

Question

I am unable to change the border radius of bootstrap modal.

.modal{     -webkit-border-radius: 0px;     -moz-border-radius: 0px;     border-radius: 0px;  }   

How should I do it?

Answer 1

BOOTSTRAP 3:

In Bootstrap 3, you need to apply the border radius to the .modal-content div element and not the .modal div element like this:

.modal-content  {     -webkit-border-radius: 0px !important;     -moz-border-radius: 0px !important;     border-radius: 0px !important;  } 

N.B. Remove the !important tags if your custom css is loaded after your bootstrap css.

---

BOOTSTRAP 4 & BOOTSTRAP 5:

In Bootstrap 4 & Bootstrap 5, you can just add the rounded-0 class name to your modal-content element (or to any other element) to set it's border radius to 0 like this:

<div class="modal" tabindex="-1" role="dialog">   <div class="modal-dialog" role="document">     <div class="modal-content rounded-0">         <!-- Your Modal content here -->     </div>   </div> </div>