diff --git a/core/modules/outside_in/css/outside_in.messages.css b/core/modules/outside_in/css/outside_in.messages.css
index fe6eff6..196a33c 100644
--- a/core/modules/outside_in/css/outside_in.messages.css
+++ b/core/modules/outside_in/css/outside_in.messages.css
@@ -12,21 +12,27 @@
   /* Provide space for icon and asterisk. */
   padding: 15px 10px 15px 35px; /* LTR */
   /* Negative margins cancel out padding on the parent. */
-  margin: 10px -20px;
-  border: 0px solid transparent;
-  border-top: 1px;
-  border-bottom: 1px;
-  border-radius: 0;
-  /* Wide left border for message type color strip. */
+  margin-top: 10px;
+  margin-right: -20px;
+  margin-bottom: 10px;
+  margin-left: -20px;
+  /* Specificity needed to reset border style from classy. */
+  border-top-width: 0;
+  border-right-width: 0;
+  border-bottom-width: 0;
+  /* 1. Sets LTR border for all messages. */
   border-left-width: 5px; /* LTR */
+  border-radius: 0;
   word-wrap: break-word;
 }
 [dir="rtl"] .ui-dialog-offcanvas .messages {
   background-position: 93% 18px;
   padding-left: 10px;
   padding-right: 35px;
+  /* Classy sets a specific value here that must be overridden. */
+  margin-left: -20px;
   border-left-width: 0;
-  border-right-width: 5px;
+  border-right-width: 5px; /* 2. Sets RTL border for all messages. */
   text-align: right;
 }
 .ui-dialog-offcanvas .messages + .messages {
@@ -40,27 +46,34 @@
 .ui-dialog-offcanvas .messages__item + .messages__item {
   margin-top: 0;
 }
+
+/* Common for all message types. */
+.ui-dialog-offcanvas .messages--status,
+.ui-dialog-offcanvas .messages--warning,
+.ui-dialog-offcanvas .messages--error {
+  background-color: #000;
+  color: #fff;
+}
+
+/* Unique Icon and border color for each message type. */
 .ui-dialog-offcanvas .messages--status {
   background-image: url(../../../misc/icons/73b355/check.svg);
-  border-left-color: #77b259;
+  border-color: transparent transparent transparent #77b259; /* LTR */
 }
 [dir="rtl"] .ui-dialog-offcanvas .messages--status {
-  border-right-color: #77b259;
+  border-color: transparent #77b259 transparent transparent;
 }
 .ui-dialog-offcanvas .messages--warning {
   background-image: url(../../../misc/icons/e29700/warning.svg);
-  border-left-color: #e09600;
+  border-color: transparent transparent transparent #e09600; /* LTR */
 }
 [dir="rtl"] .ui-dialog-offcanvas .messages--warning {
-  border-right-color: #e09600;
+  border-color: transparent #e09600 transparent transparent;
 }
 .ui-dialog-offcanvas .messages--error {
   background-image: url(../../../misc/icons/e32700/error.svg);
-  border-left-color: #e62600;
+  border-color: transparent transparent transparent #e62600; /* LTR */
 }
 [dir="rtl"] .ui-dialog-offcanvas .messages--error {
-  border-right-color: #e62600;
-}
-.ui-dialog-offcanvas .messages--error p.error {
-  color: #fff;
+  border-color: transparent #e62600 transparent transparent;
 }