Modal header has explicit "rounded-top" class

When adding headerBgVariant="dark" to a modal, the rendered <header> elements has an explicit rounded-top class added to it. This is not compatible with using Bootstrap SCSS and setting $enable-rounded: false;.

This only happens when adding a variant (doesn’t seem to matter which).

A default Bootstrap modal already has rounded corners (in accordance with $enable-rounded: false;, so I would think these added classes are either unnecessary, or should be configurable in Vue.

[dflock]

This seems to be back for me, with these versions:

"bootstrap": "4.0.0",
"bootstrap-vue": "2.0.0-rc.1",

I think the correct workaround is to fix the element that’s sticking out underneath the header - the .modal-content - not the header itself. If you apply this to the .modal-content, it fixes it:

border-top-right-radius: 10px;
border-top-left-radius: 10px;

[tmorehouse]

Another quick fix is using CSS:

.modal-content {
  overflow: hidden;
}

To make the background colors clipped to the border box (modal-container is what has the rounded corners)

One caveat is that this can affect overflowing modals i.e. dropdown menus or popovers/tooltips that need to show past the edge of the modal content.