diff --git a/qt/aqt/data/web/css/reviewer-bottom.scss b/qt/aqt/data/web/css/reviewer-bottom.scss
index bcd1bf77a..a514474f2 100644
--- a/qt/aqt/data/web/css/reviewer-bottom.scss
+++ b/qt/aqt/data/web/css/reviewer-bottom.scss
@@ -39,22 +39,16 @@ button {
     border-style: dashed;
 }
 
-.answerButton,
-.answerButton:hover,
-.answerButton:focus {
-    border-width: 1px;
-}
-
 .answerIncorrect,
 .answerIncorrect:hover,
 .answerIncorrect:focus {
-    border-color: #e01b24;
+    border-color: color(border-answerIncorrect);
 }
 
 .answerCorrect,
 .answerCorrect:hover,
 .answerCorrect:focus {
-    border-color: #2ec27e;
+    border-color: color(border-answerCorrect);
 }
 
 .hitem {
diff --git a/ts/lib/sass/_vars.scss b/ts/lib/sass/_vars.scss
index a8da766ad..65d99c6b3 100644
--- a/ts/lib/sass/_vars.scss
+++ b/ts/lib/sass/_vars.scss
@@ -178,6 +178,20 @@ $vars: (
                     dark: palette(blue, 5),
                 ),
             ),
+            answerCorrect: (
+                "Border color of answer buttons that show the answer was correct (hard, good, easy)",
+                (
+                    light: palette(green, 5),
+                    dark: palette(green, 5),
+                )
+            ),
+            answerIncorrect: (
+                "Border color of the answer button that shows that the answer was incorrect (again)",
+                (
+                    light: palette(red, 5),
+                    dark: palette(red, 5),
+                )
+            ),
         ),
         button: (
             bg: (