Screenshot:
So that yellow box or modal footer / header and the modal itself somehow have a 7px radius, but it’s not as straight-forward as putting in border-radius: 14px in one place somewhere in the CSS. The radius calculation seems to be tied in and involved with other things.
So I’m wondering, how can one globally set the default border radii in an easy way?
I need those corners round there!
Adding the following CSS seemed to work for me…
.modal {
--bs-modal-border-radius: 14px;
}
You might want to add the modal ID to your CSS, so if you add other modals to your website, they won’t all have a 14 pixel radius. Example…
#modal-1 .modal {
--bs-modal-border-radius: 14px;
}
Now, adding a second modal it will will have the ID modal-2, so it will use the default modal radius values.
Thanks. I went back in and saw that BSS had already populated some settings in a non-locked CSS:
Except I have to adjust the radius in that highlighted line and 2 lines above it. But it works now! Thanks.
With Bootstrap 5.x, CSS variables are being used all over the place. Sometimes it’s easier to find the exact class that you need to change by previewing your website in Chrome, and then using Chrome’s developer tools to just highlight the item in question and see exact CSS that is affecting it.
