diff -u b/core/themes/claro/css/components/dialog.css b/core/themes/claro/css/components/dialog.css
--- b/core/themes/claro/css/components/dialog.css
+++ b/core/themes/claro/css/components/dialog.css
@@ -152,6 +152,11 @@
   background: none;
 }
 
+.ui-dialog.ui-dialog-off-canvas.ui-dialog-position-side .ui-widget-content.ui-dialog-content {
+  border-left: 1px solid #6a6a6a;
+  background: #fff;
+}
+
 #drupal-off-canvas .inline-block-list {
   margin-left: 0;
   list-style: none;
diff -u b/core/themes/claro/css/components/dialog.pcss.css b/core/themes/claro/css/components/dialog.pcss.css
--- b/core/themes/claro/css/components/dialog.pcss.css
+++ b/core/themes/claro/css/components/dialog.pcss.css
@@ -125,6 +125,10 @@
 .ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
   background: none;
 }
+.ui-dialog.ui-dialog-off-canvas.ui-dialog-position-side .ui-widget-content.ui-dialog-content {
+  border-left: 1px solid #6a6a6a;
+  background: #fff;
+}
 #drupal-off-canvas .inline-block-list {
   margin-left: 0;
   list-style: none;