diff --git a/packages/grid/theme/lumo/vaadin-grid-styles.js b/packages/grid/theme/lumo/vaadin-grid-styles.js
index 9a9bdbad37..b7b87c9aec 100644
--- a/packages/grid/theme/lumo/vaadin-grid-styles.js
+++ b/packages/grid/theme/lumo/vaadin-grid-styles.js
@@ -269,12 +269,18 @@ registerStyles(
     /* Column resizing */
 
     [part='resize-handle'] {
-      width: 3px;
+      --_resize-handle-width: 3px;
+      width: var(--_resize-handle-width);
       background-color: var(--lumo-primary-color-50pct);
       opacity: 0;
       transition: opacity 0.2s;
     }
 
+    [part='resize-handle']::before {
+      transform: translateX(calc(-50% + var(--_resize-handle-width) / 2));
+      width: var(--lumo-size-s);
+    }
+
     :host(:not([reordering])) *:not([column-resizing]) [part~='cell']:hover [part='resize-handle'],
     [part='resize-handle']:active {
       opacity: 1;