Fix border curve styling.

src/card.ts

@@ -1686,7 +1686,7 @@ export class FrigateCard extends LitElement {
   disconnectedCallback(): void {
     // When the dashboard 'tab' is changed, the media is effectively unloaded.
     this._mediaUnloadedHandler();
-    
+
     if (screenfull.isEnabled) {
       screenfull.off('change', this._fullscreenHandler.bind(this));
     }
@@ -1790,6 +1790,16 @@ export class FrigateCard extends LitElement {
         !!this._isTriggered() && this._getConfig().view.scan.show_trigger_status,
     };
 
+    const mainClasses = {
+      main: true,
+      'curve-top':
+        this._getConfig().menu.style !== 'outside' ||
+        this._getConfig().menu.position !== 'top',
+      'curve-bottom':
+        this._getConfig().menu.style !== 'outside' ||
+        this._getConfig().menu.position === 'top',
+    };
+
     const actions = this._getMergedActions();
     const renderMenuAbove =
       this._getConfig().menu.style === 'outside' &&
@@ -1816,7 +1826,7 @@ export class FrigateCard extends LitElement {
       @frigate-card:render=${() => this.requestUpdate()}
     >
       ${renderMenuAbove ? this._renderMenu() : ''}
-      <div ${ref(this._refMain)} class="main">
+      <div ${ref(this._refMain)} class="${classMap(mainClasses)}">
         ${this._cameras === undefined && !this._message
           ? until(
               (async () => {

src/scss/card.scss

@@ -7,6 +7,10 @@
   // Different browsers use different colors as their fullscreen background,
   // this ensures the same experience across all browsers.
   background-color: var(--card-background-color);
+
+  // The primary border-radius used is the div.main. This is only useful for
+  // keeping the background-color within the radius.
+  border-radius: var(--ha-card-border-radius, 4px);
 }
 
 :host([dark]) {
@@ -22,11 +26,6 @@ div.main {
   display: flex;
   justify-content: center;
 
-  // Need to apply the border radius on the container level, as the ha-card has
-  // overflow visible in order to allow a submenu to extend beyond the card
-  // boundary.
-  border-radius: var(--ha-card-border-radius, 4px);
-
   // Necessary to get Safari to show border-radius correctly.
   transform: translateZ(0);
 
@@ -45,6 +44,20 @@ div.main::-webkit-scrollbar {
   display: none;
 }
 
+// Need to apply the border radius on the container level, as the ha-card has
+// overflow visible in order to allow a submenu to extend beyond the card
+// boundary. Need to be able to selectively curve top or bottom depending on
+// whether the outside menu is being shown. There's no way to select 'preceding
+// element' in CSS, so this must be implemented in JS.
+div.main.curve-top {
+  border-top-left-radius: var(--ha-card-border-radius, 4px);
+  border-top-right-radius: var(--ha-card-border-radius, 4px);
+}
+div.main.curve-bottom {
+  border-bottom-left-radius: var(--ha-card-border-radius, 4px);
+  border-bottom-right-radius: var(--ha-card-border-radius, 4px);
+}
+
 /* The 'hover' menu mode is styling applied outside of the menu itself */
 frigate-card-menu[data-style='hover'] {
   z-index: 1;
@@ -69,11 +82,6 @@ ha-card {
   height: 100%;
   position: static;
   color: var(--secondary-text-color, white);
-
-  // The primary border-radius used is the div.main, since this one has overflow
-  // explicitly visible this is only useful for keeping the background-color
-  // within the radius.
-  border-radius: var(--ha-card-border-radius, 4px);
 }
 ha-card.triggered {
   @keyframes warning-pulse {