diff --git a/packages/map/src/styles/vaadin-map-base-styles.js b/packages/map/src/styles/vaadin-map-base-styles.js
index b6257e8c8d0..f4d0ebc822d 100644
--- a/packages/map/src/styles/vaadin-map-base-styles.js
+++ b/packages/map/src/styles/vaadin-map-base-styles.js
@@ -151,11 +151,20 @@ export const mapStyles = css`
   }
 
   .ol-scale-bar-inner {
+    display: flex;
     border: 1px solid rgba(0, 0, 0, 0.5);
     box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
     overflow: hidden;
   }
 
+  .ol-scale-singlebar-even {
+    background: #000;
+  }
+
+  .ol-scale-singlebar-odd {
+    background: #fff;
+  }
+
   .ol-scale-step-marker {
     display: none;
   }
diff --git a/packages/map/test/visual/base/map.test.js b/packages/map/test/visual/base/map.test.js
index 7dcf75e05e1..986cac60c95 100644
--- a/packages/map/test/visual/base/map.test.js
+++ b/packages/map/test/visual/base/map.test.js
@@ -42,6 +42,12 @@ describe('map', () => {
       element.configuration.getControls().push(new OverviewMap({ label: '', collapseLabel: '' }));
       await visualDiff(div, 'controls-all-controls');
     });
+
+    it('scale bar', async () => {
+      // Add scale line using bar mode
+      element.configuration.getControls().push(new ScaleLine({ bar: true, text: true }));
+      await visualDiff(div, 'controls-scale-bar');
+    });
   });
 
   describe('theme', () => {
diff --git a/packages/map/test/visual/base/screenshots/map/baseline/controls-scale-bar.png b/packages/map/test/visual/base/screenshots/map/baseline/controls-scale-bar.png
new file mode 100644
index 00000000000..4dcb26da958
Binary files /dev/null and b/packages/map/test/visual/base/screenshots/map/baseline/controls-scale-bar.png differ
diff --git a/packages/map/test/visual/lumo/map.test.js b/packages/map/test/visual/lumo/map.test.js
index 6669f7a35ca..0689511d04f 100644
--- a/packages/map/test/visual/lumo/map.test.js
+++ b/packages/map/test/visual/lumo/map.test.js
@@ -44,6 +44,12 @@ describe('map', () => {
       element.configuration.getControls().push(new OverviewMap({ label: '', collapseLabel: '' }));
       await visualDiff(div, 'controls-all-controls');
     });
+
+    it('scale bar', async () => {
+      // Add scale line using bar mode
+      element.configuration.getControls().push(new ScaleLine({ bar: true, text: true }));
+      await visualDiff(div, 'controls-scale-bar');
+    });
   });
 
   describe('theme', () => {
diff --git a/packages/map/test/visual/lumo/screenshots/map/baseline/controls-scale-bar.png b/packages/map/test/visual/lumo/screenshots/map/baseline/controls-scale-bar.png
new file mode 100644
index 00000000000..ae3a921fb47
Binary files /dev/null and b/packages/map/test/visual/lumo/screenshots/map/baseline/controls-scale-bar.png differ