How to change border radius of bootstrap modal?

by

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>

Leave a Comment