Issue #3316627 by bnjmnm, Gauravvvv, Sakthivel M, Akshay kashyap, Asha Nair,...

Issue #3316627 by bnjmnm, Gauravvvv, Sakthivel M, Akshay kashyap, Asha Nair, joachim, smustgrave: dropbuttons get weird white line when font size is changed and at at various zoom settings

core/themes/claro/css/components/dropbutton.css

@@ -82,6 +82,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 {

core/themes/claro/css/components/dropbutton.pcss.css

@@ -72,6 +72,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);