diff --git a/packages/eui-theme-common/src/global_styling/mixins/borders.ts b/packages/eui-theme-common/src/global_styling/mixins/borders.ts
index 9b997e5f6f9..785df3a066d 100644
--- a/packages/eui-theme-common/src/global_styling/mixins/borders.ts
+++ b/packages/eui-theme-common/src/global_styling/mixins/borders.ts
@@ -29,6 +29,32 @@ export type BorderSides =
   | 'vertical'
   | 'all';
 
+/**
+ * Defines styles for floating boarders applied in DARK mode via EUI shadow utils
+ */
+export const euiShadowFloatingBorderStyles = (
+  euiThemeContext: UseEuiTheme,
+  options: {
+    side?: BorderSides;
+    borderColor?: string;
+    borderWidth?: string;
+    borderStyle?: string;
+  }
+) => {
+  return `
+    /* create a containing block without using \`position\` to prevent CSS specificity issues and unexpected overrides;
+    \`transform: translateZ(0)\` is the least likely to affect other behaviors (overflow, layout) */
+    transform: translateZ(0);
+
+    ${euiBorderStyles(euiThemeContext, options)}
+  `;
+};
+
+/**
+ * Shared style for floating borders.
+ * Uses a pseudo element with `border` attribute to prevent both dimension changes due to
+ * the border width as well as visible gaps due to the need of a transparent border in LIGHT mode.
+ */
 export const euiBorderStyles = (
   euiThemeContext: UseEuiTheme,
   options: {
@@ -48,6 +74,15 @@ export const euiBorderStyles = (
   const borderProperty = getBorderSide(side);
 
   return `
-    ${borderProperty}: ${borderWidth} ${borderStyle} ${borderColor};
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      /* ensure to keep on top of flush content */
+      z-index: 0;
+      ${borderProperty}: ${borderWidth} ${borderStyle} ${borderColor};
+      border-radius: inherit;
+      pointer-events: none;
+    }
   `;
 };
diff --git a/packages/eui-theme-common/src/global_styling/mixins/shadow.ts b/packages/eui-theme-common/src/global_styling/mixins/shadow.ts
index 3f4982702de..652f704a245 100644
--- a/packages/eui-theme-common/src/global_styling/mixins/shadow.ts
+++ b/packages/eui-theme-common/src/global_styling/mixins/shadow.ts
@@ -12,7 +12,7 @@ import {
   _EuiThemeShadowHoverSize,
   _EuiThemeShadowSize,
 } from '../variables/shadow';
-import { BorderSides, euiBorderStyles } from './borders';
+import { BorderSides, euiShadowFloatingBorderStyles } from './borders';
 
 export interface EuiShadowOptions {
   /** @deprecated */
@@ -290,7 +290,7 @@ const _shadowStyles = (
   const { border = 'all', type = 'box-shadow' } = options;
   const borderStyle =
     euiThemeContext.colorMode === 'DARK' && border !== 'none'
-      ? `${euiBorderStyles(euiThemeContext, {
+      ? `${euiShadowFloatingBorderStyles(euiThemeContext, {
           side: border ?? 'all',
         })}`
       : '';
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiCheckableCard_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiCheckableCard_Playground.png
index fc0f6f36ddc..b744903f161 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiCheckableCard_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiCheckableCard_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiCheckableCard_With_Interactive_Children.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiCheckableCard_With_Interactive_Children.png
index f6853a2a261..42ba2fdb2d8 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiCheckableCard_With_Interactive_Children.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiCheckableCard_With_Interactive_Children.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiCheckableCard_With_Non_Interactive_Children.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiCheckableCard_With_Non_Interactive_Children.png
index af9e8c59e35..788f1e73109 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiCheckableCard_With_Non_Interactive_Children.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiCheckableCard_With_Non_Interactive_Children.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png
index 6a1c2193d3d..95ef2ccf226 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_High_Contrast_Mode.png
index dc3bb0b67f0..8f92dc8daee 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_High_Contrast_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_High_Contrast_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png
index cf08b7ec1b3..d5943352375 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Kitchensink.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Kitchensink.png
index c0ca3418ffd..e0a8dffdc5a 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Kitchensink.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Kitchensink.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Kitchensink_Dark.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Kitchensink_Dark.png
index ee7ae9c83c9..134696c549e 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Kitchensink_Dark.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Kitchensink_Dark.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Overlapping_Panels.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Overlapping_Panels.png
index 6b9e3292363..f65b2e2ced5 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Overlapping_Panels.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Overlapping_Panels.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner_Dark.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner_Dark.png
index b02546edcbe..1a1be958970 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner_Dark.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner_Dark.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer_Dark.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer_Dark.png
index a149a22fe8e..1ec2b49241b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer_Dark.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer_Dark.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png
index 2fd5f02c83e..a32f256e0cb 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png
index feacf5407d1..56ddd6490b1 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png
index 8da37a7b0c6..d1bbd9712b0 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png and b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png
index e85d4d11d5e..33b795d1535 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiCheckableCard_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiCheckableCard_Playground.png
index bc0a9a805d3..c2da4d015ef 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiCheckableCard_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiCheckableCard_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiCheckableCard_With_Interactive_Children.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiCheckableCard_With_Interactive_Children.png
index fad661477ad..61fca494d11 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiCheckableCard_With_Interactive_Children.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiCheckableCard_With_Interactive_Children.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiCheckableCard_With_Non_Interactive_Children.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiCheckableCard_With_Non_Interactive_Children.png
index cf0463b36f3..5ceaa984b74 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiCheckableCard_With_Non_Interactive_Children.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiCheckableCard_With_Non_Interactive_Children.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png
index 650a1fe4d89..e37e4db95da 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png
index 2887f72e87d..3177f84f795 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png
index 3460ec6a50b..d992573330c 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Kitchensink.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Kitchensink.png
index 2b5c1a8dda5..03cc5c1eb48 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Kitchensink.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Kitchensink.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Kitchensink_Dark.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Kitchensink_Dark.png
index 3610bcf65cf..7825665e150 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Kitchensink_Dark.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Kitchensink_Dark.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Overlapping_Panels.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Overlapping_Panels.png
index 3b4eebdd479..f5c67c878cc 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Overlapping_Panels.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Overlapping_Panels.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner_Dark.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner_Dark.png
index ffcda0f892c..fe209d9eb1d 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner_Dark.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner_Dark.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer_Dark.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer_Dark.png
index 42f11512052..54c5700b4be 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer_Dark.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer_Dark.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png
index f3b3373272c..45577f98e83 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png
index c2648de34b6..41e60e1330e 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png
index 786e9283c31..8404d93ccb2 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png
index 15f00940f27..0d85828ad76 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png and b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png
index 48852bb1da5..9e4c00ba775 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png differ
diff --git a/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts b/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts
index 97163275634..9519379e1ac 100644
--- a/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts
+++ b/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts
@@ -35,7 +35,7 @@ export const euiBottomBarStyles = (euiThemeContext: UseEuiTheme) => {
       background-color: ${euiTheme.components.bottomBarBackground};
       ${logicalCSS('border-top', euiTheme.border.thin)}
       ${highContrastModeStyles(euiThemeContext, {
-        none: euiShadowFlat(euiThemeContext, { border: 'top' }),
+        none: euiShadowFlat(euiThemeContext, { border: 'none' }),
       })}
       /* prevent shadow from overlapping content in compositions */
       clip-path: polygon(0 -100vh, 100% -100vh, 100% 100%, 0 100%);
diff --git a/packages/eui/src/components/context_menu/context_menu.stories.tsx b/packages/eui/src/components/context_menu/context_menu.stories.tsx
index cf2f5cb0415..bdbd0278bd2 100644
--- a/packages/eui/src/components/context_menu/context_menu.stories.tsx
+++ b/packages/eui/src/components/context_menu/context_menu.stories.tsx
@@ -203,16 +203,17 @@ export const InScrollablePopover: Story = {
         }}
         panelPaddingSize="none"
         anchorPosition="downLeft"
-        panelProps={{
-          css: css`
+      >
+        <div
+          css={css`
             ${logicalCSS('max-height', '250px')}
             ${useEuiScrollBar()};
             ${/* eslint-disable-next-line local/css-logical-properties */ ''}
             overflow-y: auto;
-          `,
-        }}
-      >
-        <EuiContextMenu {...args} />
+          `}
+        >
+          <EuiContextMenu {...args} />
+        </div>
       </EuiPopover>
     );
   },
diff --git a/packages/eui/src/components/header/header.styles.ts b/packages/eui/src/components/header/header.styles.ts
index e4f0174c6cd..83321229afa 100644
--- a/packages/eui/src/components/header/header.styles.ts
+++ b/packages/eui/src/components/header/header.styles.ts
@@ -39,9 +39,10 @@ export const euiHeaderStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('border-bottom', euiTheme.border.thin)}
       ${euiShadowXSmall(euiThemeContext, {
         border: 'none',
-      })};
+      })}
 
-      & + & {
+      /* uses the global class as & might not reference the same due to dynamic classes */
+      & + .euiHeader {
         clip-path: polygon(0 0, 100% 0, 100% 100vh, 0 100vh);
       }
     `,
diff --git a/packages/eui/src/components/panel/panel.stories.tsx b/packages/eui/src/components/panel/panel.stories.tsx
index 3d9b99f079f..cae0f5a5637 100644
--- a/packages/eui/src/components/panel/panel.stories.tsx
+++ b/packages/eui/src/components/panel/panel.stories.tsx
@@ -14,9 +14,15 @@ import {
   disableStorybookControls,
   enableFunctionToggleControls,
 } from '../../../.storybook/utils';
-import { highContrastModeStyles, logicalCSS } from '../../global_styling';
+import {
+  euiShadow,
+  highContrastModeStyles,
+  logicalCSS,
+} from '../../global_styling';
+import { useEuiTheme } from '../../services';
 import { EuiPanel, EuiPanelProps } from './panel';
 import { EuiSpacer } from '../spacer';
+import { EuiSplitPanel } from './split_panel';
 
 const meta: Meta<EuiPanelProps> = {
   title: 'Layout/EuiPanel',
@@ -89,6 +95,9 @@ export const Kitchensink: Story = {
     children: 'Panel content',
   },
   render: function Render(args: EuiPanelProps) {
+    const euiThemeContext = useEuiTheme();
+    const { euiTheme } = euiThemeContext;
+
     return (
       <>
         <EuiPanel {...args} hasBorder onClick={undefined} />
@@ -128,6 +137,28 @@ export const Kitchensink: Story = {
             Footer
           </EuiPanel>
         </EuiPanel>
+
+        <EuiSpacer size="m" />
+
+        <EuiSplitPanel.Outer>
+          <EuiSplitPanel.Inner>Top or left panel</EuiSplitPanel.Inner>
+          <EuiSplitPanel.Inner color="subdued">
+            Bottom or right panel
+          </EuiSplitPanel.Inner>
+        </EuiSplitPanel.Outer>
+
+        <EuiSpacer size="m" />
+
+        <div
+          css={css`
+            padding: ${euiTheme.size.base};
+            background-color: ${euiTheme.colors.backgroundBasePlain};
+            border-radius: ${euiTheme.border.radius.small};
+            ${euiShadow(euiThemeContext)};
+          `}
+        >
+          Custom panel
+        </div>
       </>
     );
   },
diff --git a/packages/eui/src/components/panel/panel.styles.ts b/packages/eui/src/components/panel/panel.styles.ts
index d8593d4fd0b..c5c48de4bd2 100644
--- a/packages/eui/src/components/panel/panel.styles.ts
+++ b/packages/eui/src/components/panel/panel.styles.ts
@@ -7,7 +7,11 @@
  */
 
 import { css } from '@emotion/react';
-import { euiShadow, euiShadowHover } from '@elastic/eui-theme-common';
+import {
+  euiBorderStyles,
+  euiShadow,
+  euiShadowHover,
+} from '@elastic/eui-theme-common';
 
 import { UseEuiTheme } from '../../services';
 import {
@@ -33,13 +37,15 @@ export const euiPanelBorderStyles = (
 
   return highContrastModeStyles(euiThemeContext, {
     none: `
-      border: ${
-        borderColor ?? hasVisibleBorder
-          ? `${euiTheme.border.width.thin} solid ${euiTheme.border.color}`
-          : colorMode === 'DARK'
-          ? `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBaseFloating}`
-          : 'none'
-      };  
+      /* Using a pseudo element for the border instead of floating border only
+      because the transparent border might otherwise be visible with arbitrary
+      full-width/height content in light mode. */
+      ${euiBorderStyles(euiThemeContext, {
+        borderColor:
+          borderColor ?? hasVisibleBorder
+            ? euiTheme.border.color
+            : euiTheme.colors.borderBaseFloating,
+      })}
     `,
     preferred: `
       border: ${euiTheme.border.thin};
@@ -63,16 +69,15 @@ export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
 
     hasShadow: css`
       ${euiShadow(euiThemeContext, 'm')}
+    `,
 
+    hasBorder: css`
       ${euiPanelBorderStyles(euiThemeContext, {
+        borderColor: euiTheme.border.color,
         hasFloatingBorder: false,
       })}
     `,
 
-    hasBorder: css`
-      border: ${euiTheme.border.thin};
-    `,
-
     radius: {
       none: css``,
       m: css`
diff --git a/packages/website/docs/getting-started/theming/utilities/shadows/index.mdx b/packages/website/docs/getting-started/theming/utilities/shadows/index.mdx
index 2a516d55b8d..0079e91f45d 100644
--- a/packages/website/docs/getting-started/theming/utilities/shadows/index.mdx
+++ b/packages/website/docs/getting-started/theming/utilities/shadows/index.mdx
@@ -53,14 +53,14 @@ this might result in duplicate neighboring borders. To adjust this, use the `bor
   import { euiShadow } from '@elastic/eui';
 
   const styles = css`
-    ${euiShadow('s', { border: 'none'})}
-    ${euiShadow('s', { border: 'all'})}
-    ${euiShadow('s', { border: 'top'})}
-    ${euiShadow('s', { border: 'bottom'})}
-    ${euiShadow('s', { border: 'left'})}
-    ${euiShadow('s', { border: 'right'})}
-    ${euiShadow('s', { border: 'horizontal'})}
-    ${euiShadow('s', { border: 'vertical'})}
+    ${euiShadow(euiThemeContext, 's', { border: 'none'})}
+    ${euiShadow(euiThemeContext, 's', { border: 'all'})}
+    ${euiShadow(euiThemeContext, 's', { border: 'top'})}
+    ${euiShadow(euiThemeContext, 's', { border: 'bottom'})}
+    ${euiShadow(euiThemeContext, 's', { border: 'left'})}
+    ${euiShadow(euiThemeContext, 's', { border: 'right'})}
+    ${euiShadow(euiThemeContext, 's', { border: 'horizontal'})}
+    ${euiShadow(euiThemeContext, 's', { border: 'vertical'})}
   `;  
   ```
 </Example.Snippet>
@@ -123,6 +123,130 @@ export default () => {
 }
 ```
 
+## Scroll behavior
+
+:::warning Do not combine shadow utils and scroll behavior styles on the same element
+:::
+
+Combining EUI shadow utils like `euiShadow()` and scroll behavior (e.g. via `overflow: scroll` or `overflow: auto`) on the same element will cause the floating border 
+in DARK mode to be scrolled. If you want to combine both, separate the styles onto different elements by placing the shadow util on the outer wrapper and the scroll 
+behavior on the inner one.
+
+<Example.Snippet>
+  ```ts
+  import { euiShadow } from '@elastic/eui';
+  import { css } from '@emotion/react';
+
+  const Component = () => {
+    const euiThemeContext = useEuiTheme();
+
+    const shadowStyles = css`
+      ${euiShadow(euiThemeContext, 's')};
+    `;
+    const scrollContainerStyles = css`
+      max-height: 100px;
+      overflow-y: auto;
+      /* specific scroll bar styling */
+      ${useEuiScrollBar()};
+    `;
+
+    return (
+      <div css={shadowStyles}>
+        <div css={scrollContainerStyles}>
+          // scrollable content
+        </div>
+      </div>
+    );
+  }
+  ```
+</Example.Snippet>
+
+```tsx interactive
+import React, { useState } from 'react';
+import {
+  useEuiTheme,
+  EuiPopover,
+  EuiButton,
+  EuiContextMenu,
+  EuiPanel,
+  EuiThemeProvider,
+  logicalCSS,
+  useEuiScrollBar,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export default () => {
+  const [isPopoverOpen, setPopoverOpen] = useState(false);
+
+  const Example = () => {
+    return (
+      <EuiPanel hasShadow={false} css={css`
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        block-size: 200px;
+      `}>
+        <EuiPopover
+          button={
+            <EuiButton onClick={() => setPopoverOpen(!isPopoverOpen)}>
+              Toggle context menu
+            </EuiButton>
+          }
+          isOpen={isPopoverOpen}
+          closePopover={() => {
+            setPopoverOpen(false);
+          }}
+          panelPaddingSize="none"
+          anchorPosition="rightCenter"
+        >
+          <div
+            css={css`
+              ${logicalCSS('max-height', '100px')}
+              ${useEuiScrollBar()};
+              overflow-y: auto;
+            `}
+          >
+            <EuiContextMenu
+              initialPanelId={0}
+              panels={[
+                {
+                  id: 0,
+                  title: 'This is a context menu',
+                  items: [
+                    {
+                      name: 'Item 1',
+                      icon: 'search',
+                    },
+                    {
+                      name: 'Item 2',
+                      icon: 'user',
+                    },
+                    {
+                      name: 'Item 3',
+                      icon: 'document',
+                    },
+                    {
+                      name: 'Item 5',
+                      icon: 'cheer',
+                    }
+                  ],
+                },
+              ]}
+            />
+          </div>
+        </EuiPopover>
+      </EuiPanel>
+    )
+  }
+
+  return (
+    <EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
+      <Example />
+    </EuiThemeProvider>
+  );
+};
+```
+
 ## Hover states
 
 Each shadowed surface, when interactive, follows the same hover effect rule: it moves up one level.