How to change border radius of bootstrap modal?

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?

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>

Borders � Bootstrap, The node cannot be controlled, and as this is the place border-radius is set, I'm stuck with the default setting of 6px. Any ways I could override� Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element. Border. Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time. Additive

Maybe you're trying to style the wrong element.

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

.modal-content

Cannot control border-radius of Modal � Issue #2772 � react , In the Create Modal Dialogs using the Bootstrap Modal Plugin article, customize Bootstrap Modals to position them, as well as change their .panel- heading { border-top-left-radius: inherit; border-top-right-radius: inherit; }. Bootstrap remove all rounded corners– Sometimes we need to remove all rounded corners of elements such as input box, buttons, modals etc.We can override the default css by our own to change the rounded corners.

You can just use rounded-0 bootstrap class.

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

Rounded Corners and Shadows – Dialogs with CSS, Heights are even more likely to change since height always related to the content inside. If you are absolutely certain of the height and width of the modal, you� In the example I use .btn.btn-custom-lg, .btn.btn-custom-sm, .btn.btn-custom-xs but if you only want to change something like the border-radius for all buttons you can make one global class to apply to the button: .btn-square { border-radius: 0; } See working example.

I use the following and success :

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

Customizing Bootstrap Modals, Bootstrap remove all rounded corners - Sometimes we need to remove all rounded corners of elements such as input box, buttons, modals etc. We can override the default css by our own to change the rounded corners. So, I tried these other ways, but there was a VERY slight irritant and that was if you keep the modal-content border radius, in FF and Chrome, there is a slight bit of white trim showing along the borders, even if you use 5px on the modal-header border radius. (standard modal-content border radius is 6px, so 5px on the modal-header border top

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

Considerations for Styling a Modal, you can easily change style of modal.modal-content - is the class in which the entire modal is located, you can specify there border-radius,� Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner): Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom

Bootstrap remove all rounded corners - CSS Example, All you need is to add your class to modal-dialog div element and change its . modal-dialog-aside .modal-content{ height: inherit; border:0; border-radius: 0;}. Bootstrap 4 Utilities. Bootstrap 4 has a lot of utility/helper classes to quickly style elements without using any CSS code.

Bootstrap 3 modal style, You can create modal popups by using HTML, CSS, and JavaScript so learn bootstrap modal popup, jQuery modal popup, and CSS modal popup in detailed way. class="hljs-name">p</span>></span>Do you want to save changes you made 1.5em; border-radius: 3px; text-decoration: none; i { padding-right: 0.3em ; } }. CSS border-radius - Specify Each Corner. The border-radius property can have from one to four values. Here are the rules: Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner):

Bootstrap 4 modal customize, Bootstrap 4 - Borders - Border utility provides style, color and radius of an element's border.

Comments
  • I think it should be rounded-0 not round-0...
  • @GiuseppeGarassino Hey, thanks for the heads up man. Fixed the typo.