diff --git a/core/themes/olivero/css/components/messages.css b/core/themes/olivero/css/components/messages.css
index ce4039f0f33..5febd0d6c0a 100644
--- a/core/themes/olivero/css/components/messages.css
+++ b/core/themes/olivero/css/components/messages.css
@@ -201,9 +201,9 @@
     left: 50%;
     display: block;
     width: 2.0625rem;
-    height: 2px;
+    height: 0;
     content: "";
-    background-color: #7e96a7;
+    border-top: solid 2px #7e96a7;
   }
 
 .messages__close:before {
@@ -216,7 +216,7 @@
 
 .messages__close:hover::before,
     .messages__close:hover::after {
-      background-color: #fff;
+      border-color: #fff;
     }
 
 .messages__close:focus {
diff --git a/core/themes/olivero/css/components/messages.pcss.css b/core/themes/olivero/css/components/messages.pcss.css
index a7de95e7ffe..3625aa5f3e4 100644
--- a/core/themes/olivero/css/components/messages.pcss.css
+++ b/core/themes/olivero/css/components/messages.pcss.css
@@ -99,9 +99,9 @@
     left: 50%;
     display: block;
     width: 33px;
-    height: 2px;
+    height: 0;
     content: "";
-    background-color: var(--color--gray-30);
+    border-top: solid 2px var(--color--gray-30);
   }
 
   &:before {
@@ -115,7 +115,7 @@
   &:hover {
     &::before,
     &::after {
-      background-color: var(--color--white);
+      border-color: var(--color--white);
     }
   }