diff --git a/core/themes/claro/css/components/dropbutton.css b/core/themes/claro/css/components/dropbutton.css
index 1b8a95af5b..15d9a3fba1 100644
--- a/core/themes/claro/css/components/dropbutton.css
+++ b/core/themes/claro/css/components/dropbutton.css
@@ -66,6 +66,19 @@
   height: 3rem;
 }
 
+.js .dropbutton-widget {
+  border-radius: 2px;
+  background-color: #d3d4d9;
+}
+
+[dir="ltr"] .js .dropbutton-action {
+  border-right: 1px solid white;
+}
+
+[dir="rtl"] .js .dropbutton-action {
+  border-left: 1px solid white;
+}
+
 /* Variants. */
 
 .js.no-touchevents .dropbutton--small {
diff --git a/core/themes/claro/css/components/dropbutton.pcss.css b/core/themes/claro/css/components/dropbutton.pcss.css
index 10f2312dcb..3c0c5ed10d 100644
--- a/core/themes/claro/css/components/dropbutton.pcss.css
+++ b/core/themes/claro/css/components/dropbutton.pcss.css
@@ -74,6 +74,15 @@
   height: var(--dropbutton-toggle-size);
 }
 
+.js .dropbutton-widget {
+  border-radius: var(--button-border-radius-size);
+  background-color: var(--button-bg-color);
+}
+
+.js .dropbutton-action {
+  border-inline-end: var(--dropbutton-border-size) solid white;
+}
+
 /* Variants. */
 .js.no-touchevents .dropbutton--small {
   height: var(--dropbutton-small-toggle-size);