Regarding now-modal
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-26-2024 11:20 PM
hello I am trying to change the css of now-modal's dialog , let say want to change the border radius,
changing it like .now-modal-dialog{ border-radius: 8px !important }
but cannot see the changes being reflected.

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-27-2024 12:12 AM
Hi @Shailja Chhilla ,
To solve this issue, you actually need to give the style border-radius: 50px;
or any other arbitrary number to your #MyPicLarge .modal-header
too. then you don't need to have CSS !important property. Something like this:
#MyPicLarge .modal-header {
border-radius: 10px 10px 0 0;
}
Pay attention that we're not gonna set the value for the lower left and right corners. We're gonna set them when styling .modal-footer
. Something like this:
#MyPicLarge .modal-footer {
border-radius: 0 0 10px 10px;
}
This is besides having the border-radius style for your #MyPicLarge .modal-content
.
Then you can see that all of your 4 corners will be round in Bootstrap 3 Modals.
Just keep in mind that the border-radius value for .modal-content
must be equal to the border-radius value of .modal-header
and .modal-footer
. For example if you choose 10px
, then don't change the number for the other one to cover the corners for you perfectly.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-27-2024 12:18 AM - edited 03-27-2024 12:19 AM
Sorry but what is #MyPicLarge , this is not working , actually i have this now-modal in my seismic component and i need to change the css there @Community Alums

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-27-2024 12:54 AM
Just put .now-modal-dialog{ border-radius: 8px } @Shailja Chhilla