How to change border radius of bootstrap modal?

Maybe you're trying to style the wrong element.

According to getbootstrap.com/javascript/#static-example, you should style:

.modal-content

I use the following and success :

<div class="modal-content" style="background: transparent;">
                      <div class="modal-body" style="border-radius: 10px;">

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>

You can just use rounded-0 bootstrap class.

<div class="modal-content rounded-0">
</div>