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?
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?
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.
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>
Maybe you're trying to style the wrong element.
According to getbootstrap.com/javascript/#static-example, you should style:
.modal-content
You can just use rounded-0
bootstrap class.
<div class="modal-content rounded-0">
</div>
I use the following and success :
<div class="modal-content" style="background: transparent;">
<div class="modal-body" style="border-radius: 10px;">
In Bootstrap 4 Try the following:
.modal-content {
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
-webkit-border: 0px !important;
-moz-border: 0px !important;
border: 0px !important;
}
border-radius removes the rounded corners while border removes all borders (left, right, top, bottom) around the modal.
In order to overwrite a piece of CSS you could add the following to your custom CSS file, assuming this file loads after Bootstrap.
.modal{
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}
I followed the answers above and I got halfway there. After some inspection I realized that my particular instance had both a .modal-content portion as well as a .modal-dialog portion. So be careful that you don't have two borders on the same modal pop-up. After I removed the .modal-dialog border and adjusted the .modal-content, my modals look super slick!
.modal-content {
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
.modal-dialog {
border: 0px !important;
}
As the previous answers state, use the !important if your code appears before the bootstrap code.