Fix enforcement of no borders or background for dots separator

packages/block-library/src/separator/style.scss

@@ -10,11 +10,6 @@
 
 // Dots block style variation
 :root :where(.wp-block-separator.is-style-dots) {
-	// Override any background themes often set on the hr tag for this style.
-	// also override the color set in the editor since it's intended for normal HR
-	background: none !important;
-	// Important required to ensure dots does not get a border.
-	border: none !important;
 	text-align: center;
 	line-height: 1;
 	height: auto;
@@ -29,3 +24,14 @@
 		font-family: serif;
 	}
 }
+
+// The following overrides should be enforced regardless of global styles.
+// The dots block style uses a pseudo element to render the dots. Background
+// color and borders would break this aesthetic.
+.wp-block-separator.is-style-dots {
+	// Override any background themes often set on the hr tag for this style.
+	// also override the color set in the editor since it's intended for normal HR
+	background: none !important;
+	// Important required to ensure dots does not get a border.
+	border: none !important;
+}