diff --git a/ui/less/containers.less b/ui/less/containers.less
index e848d4ae53..d42c453c49 100644
--- a/ui/less/containers.less
+++ b/ui/less/containers.less
@@ -170,6 +170,14 @@
   }
 }
 
+/* Offset is set to negative in order to prevent element from
+   taking extra space when it receives focus */
+
+.shaka-controls-button-panel > button:not([disabled]):focus {
+  outline: 1px solid red;
+  outline-offset: -1px;
+}
+
 /* The container for the giant play button.  Sits above (Y axis) the
  * other video controls and seek bar, in the middle of the video frame, on top
  * of (Z axis) the video. */
diff --git a/ui/less/range_elements.less b/ui/less/range_elements.less
index 9902380f98..53e74f9ca8 100644
--- a/ui/less/range_elements.less
+++ b/ui/less/range_elements.less
@@ -49,6 +49,12 @@
 
   /* Until we set a gradient background in JS, this will be the track color. */
   background: @track-default-color;
+
+  /* Add a thin outline over `range` when it receives focus  */
+  input:in-range:not([disabled]):focus {
+    outline: 1px solid red;
+    outline-offset: -1px;
+  }
 }
 
 /* The "track" is the pseudo-element inside the range element which represents