diff --git a/devtools/client/animationinspector/animation-inspector.xhtml b/devtools/client/animationinspector/animation-inspector.xhtml
index 126d61146554..def91dab2668 100644
--- a/devtools/client/animationinspector/animation-inspector.xhtml
+++ b/devtools/client/animationinspector/animation-inspector.xhtml
@@ -22,7 +22,7 @@
     <div id="timeline-toolbar" class="theme-toolbar">
       <button id="rewind-timeline" standalone="true" class="devtools-button"></button>
       <button id="pause-resume-timeline" standalone="true" class="devtools-button pause-button paused"></button>
-      <span id="timeline-rate"></span>
+      <span id="timeline-rate" standalone="true" class="devtools-button"></span>
       <span id="timeline-current-time" class="label"></span>
     </div>
     <div id="players"></div>
diff --git a/devtools/client/themes/animationinspector.css b/devtools/client/themes/animationinspector.css
index 037dc438fddf..0244ec812ce9 100644
--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -62,11 +62,6 @@ body {
   display: flex;
 }
 
-#global-toolbar .label,
-#timeline-toolbar .label {
-  padding: 1px 4px;
-}
-
 /* The main animations container */
 
 #players {
@@ -96,13 +91,24 @@ body {
 
 /* Element picker, toggle-all buttons, timeline pause button, ... */
 
-#global-toolbar .devtools-button,
-#timeline-toolbar .devtools-button {
-  border-width: 0 0 0 1px;
+#global-toolbar > *,
+#timeline-toolbar > * {
   min-height: var(--toolbar-height);
+  border-width: 0 0 0 1px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-#timeline-toolbar .devtools-button {
+#global-toolbar .label,
+#timeline-toolbar .label {
+  padding: 0 5px;
+  border-style: solid;
+  border-color: rgba(170, 170, 170, .5);
+}
+
+#timeline-toolbar .devtools-button,
+#timeline-toolbar .label {
   border-width: 0 1px 0 0;
 }