Correctly account for gridStyle.border

src/components/datagrid/_data_grid.scss

@@ -74,15 +74,20 @@
   bottom: 0;
   left: 0;
 
+  // Ensure the underlying grid is still interactable
+  pointer-events: none;
+
   // Ensure the scrolling data grid body always has border edges
   // regardless of cell position
   box-shadow: inset 0 0 0 $euiBorderWidthThin $euiBorderColor;
   // Note that this *must* be an inset `box-shadow` and not `border`, because
   // border will affect the relative position of the child scroll bar overlays
   // and cause them to be off by the width of the border
 
-  // Ensure the underlying grid is still interactable
-  pointer-events: none;
+  // For grids with horizontal-only borders, only render a bottom 'border'
+  .euiDataGrid--bordersHorizontal & {
+    box-shadow: inset 0 (-2 * $euiBorderWidthThin) 0 (-1 * $euiBorderWidthThin) $euiBorderColor;
+  }
 
   // Ensure the horizontal scrollbar has a top border
   .euiDataGrid__scrollBarOverlayBottom {

src/components/datagrid/body/data_grid_body.tsx

@@ -261,7 +261,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     hasVerticalScroll,
     hasHorizontalScroll,
     scrollBorderOverlay,
-  } = useScrollBars(outerGridRef);
+  } = useScrollBars(outerGridRef, gridStyles.border);
 
   /**
    * Widths

src/components/datagrid/utils/scrolling.test.tsx

@@ -393,6 +393,16 @@ describe('useScrollBars', () => {
       });
     });
 
+    describe('if the grid does not display borders', () => {
+      it('does not render anything', () => {
+        const { scrollBorderOverlay } = testCustomHook(() =>
+          useScrollBars(mockOuterGridRef, 'none')
+        );
+
+        expect(scrollBorderOverlay).toEqual(null);
+      });
+    });
+
     describe('if the grid scrolls but has inline scrollbars & no scrollbar width/height', () => {
       it('renders a single overlay with borders for the outermost grid', () => {
         const { scrollBorderOverlay } = testCustomHook(() =>

src/components/datagrid/utils/scrolling.tsx

@@ -15,6 +15,7 @@ import React, {
   ReactNode,
 } from 'react';
 import { VariableSizeGrid as Grid } from 'react-window';
+import { EuiDataGridStyle } from '../data_grid_types';
 import { DataGridFocusContext } from './focus';
 
 interface ScrollCellIntoView {
@@ -178,7 +179,8 @@ export const useScrollCellIntoView = ({
  * Checks whether the current grid scrolls and/or has scrollbars
  */
 export const useScrollBars = (
-  outerGridRef: MutableRefObject<HTMLDivElement | null>
+  outerGridRef: MutableRefObject<HTMLDivElement | null>,
+  borderStyle: EuiDataGridStyle['border'] = 'all'
 ): {
   scrollBarHeight: number;
   scrollBarWidth: number;
@@ -210,6 +212,9 @@ export const useScrollBars = (
     if (!hasHorizontalScroll && !hasVerticalScroll) {
       return null; // Nothing to render if the grid doesn't scroll
     }
+    if (borderStyle === 'none') {
+      return null; // Nothing to render if the grid doesn't use borders
+    }
     return (
       <div className="euiDataGrid__scrollOverlay" role="presentation">
         {scrollBarHeight > 0 && (
@@ -226,7 +231,13 @@ export const useScrollBars = (
         )}
       </div>
     );
-  }, [hasHorizontalScroll, hasVerticalScroll, scrollBarHeight, scrollBarWidth]);
+  }, [
+    hasHorizontalScroll,
+    hasVerticalScroll,
+    scrollBarHeight,
+    scrollBarWidth,
+    borderStyle,
+  ]);
 
   return {
     scrollBarHeight,