diff --git a/core/misc/dialog/off-canvas.theme.css b/core/misc/dialog/off-canvas.theme.css
index e1990a7d46..f3f69304df 100644
--- a/core/misc/dialog/off-canvas.theme.css
+++ b/core/misc/dialog/off-canvas.theme.css
@@ -34,13 +34,18 @@
   background-position: center center;
   background-repeat: no-repeat;
   background-color: transparent;
-  border: 0;
+  border: 3px solid transparent;
+  height: 30px;
+  width: 30px;
   position: absolute;
+  top: calc(50% - 6px);
   right: 1em;
-  transition: background .5s ease;
+  transition: all .5s ease;
 }
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover {
+.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover,
+.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:focus {
   background-image: url(../icons/ffffff/ex.svg);
+  border: 3px solid #ffffff;
 }
 [dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
   left: 1em;
diff --git a/core/themes/stable/css/core/dialog/off-canvas.theme.css b/core/themes/stable/css/core/dialog/off-canvas.theme.css
index 89eb682db4..8074d91600 100644
--- a/core/themes/stable/css/core/dialog/off-canvas.theme.css
+++ b/core/themes/stable/css/core/dialog/off-canvas.theme.css
@@ -34,13 +34,18 @@
   background-position: center center;
   background-repeat: no-repeat;
   background-color: transparent;
-  border: 0;
+  border: 3px solid transparent;
+  height: 30px;
+  width: 30px;
   position: absolute;
+  top: calc(50% - 6px);
   right: 1em;
-  transition: background .5s ease;
+  transition: all .5s ease;
 }
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover {
+.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover,
+.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:focus {
   background-image: url(../../../images/core/icons/ffffff/ex.svg);
+  border: 3px solid #ffffff;
 }
 [dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
   left: 1em;