diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index de107d7b7..dd6287f8e 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -585,13 +585,9 @@ StScrollBar {
   .osd-monitor-label { font-size: 3em; }
   .level {
     height: 0.6em;
-    border-radius: 0.3em;
-    background-color: transparentize(darken($osd_bg_color,15%),0.5);
-    color: $osd_fg_color;
-  }
-  .level-bar {
-    background-color: $osd_fg_color;
-    border-radius: 0.3em;
+    -barlevel-height: 0.6em;
+    -barlevel-background-color: transparentize(darken($osd_bg_color,15%),0.5);
+    -barlevel-active-background-color: $osd_fg_color;
   }
 }
 
diff --git a/js/ui/barLevel.js b/js/ui/barLevel.js
index c018ef31b..2b35496b4 100644
--- a/js/ui/barLevel.js
+++ b/js/ui/barLevel.js
@@ -60,9 +60,15 @@ var BarLevel = new Lang.Class({
         let barLevelColor = themeNode.get_color('-barlevel-background-color');
         let barLevelActiveColor = themeNode.get_color('-barlevel-active-background-color');
 
-        let barLevelBorderWidth = themeNode.get_length('-barlevel-border-width');
-        let barLevelBorderColor = themeNode.get_color('-barlevel-border-color');
-        let barLevelActiveBorderColor = themeNode.get_color('-barlevel-active-border-color');
+        let barLevelBorderWidth = Math.min(themeNode.get_length('-barlevel-border-width'), 1);
+        let [hasBorderColor, barLevelBorderColor] =
+            themeNode.lookup_color('-barlevel-border-color', false);
+        if (!hasBorderColor)
+            barLevelBorderColor = barLevelColor;
+        let [hasActiveBorderColor, barLevelActiveBorderColor] =
+            themeNode.lookup_color('-barlevel-active-border-color', false);
+        if (!hasActiveBorderColor)
+            barLevelActiveBorderColor = barLevelActiveColor;
 
         const TAU = Math.PI * 2;
 
diff --git a/js/ui/osdWindow.js b/js/ui/osdWindow.js
index 5bd91c7fa..fe8cf780a 100644
--- a/js/ui/osdWindow.js
+++ b/js/ui/osdWindow.js
@@ -4,6 +4,7 @@ const Clutter = imports.gi.Clutter;
 const GLib = imports.gi.GLib;
 const St = imports.gi.St;
 
+const BarLevel = imports.ui.barLevel;
 const Lang = imports.lang;
 const Layout = imports.ui.layout;
 const Main = imports.ui.main;
@@ -17,16 +18,17 @@ var LEVEL_ANIMATION_TIME = 0.1;
 
 var LevelBar = new Lang.Class({
     Name: 'LevelBar',
+    Extends: BarLevel.BarLevel,
 
     _init() {
         this._level = 0;
 
-        this.actor = new St.Bin({ style_class: 'level',
-                                  x_align: St.Align.START,
-                                  y_fill: true });
-        this._bar = new St.Widget({ style_class: 'level-bar' });
+        let params = {
+            styleClass: 'level',
+        }
+        this.parent(this._level, params);
 
-        this.actor.set_child(this._bar);
+        this.actor.accessible_name = _("Volume");
 
         this.actor.connect('notify::width', () => { this.level = this.level; });
     },
@@ -38,10 +40,7 @@ var LevelBar = new Lang.Class({
     set level(value) {
         this._level = Math.max(0, Math.min(value, 100));
 
-        let alloc = this.actor.get_allocation_box();
-        let newWidth = Math.round((alloc.x2 - alloc.x1) * this._level / 100);
-        if (newWidth != this._bar.width)
-            this._bar.width = newWidth;
+        this.setValue(this._level / 100);
     }
 });