Override core theme.json's button element style

The border-width: 0; set by the button element through the Elements API interferes with the UX of adding a border. It means we are back to the situation needing to set multiple fields before a border shows if we don't override it.

packages/block-library/src/button/editor.scss

@@ -79,3 +79,40 @@ div[data-type="core/button"] {
 .editor-styles-wrapper .wp-block-button[style*="text-decoration"] .wp-block-button__link {
 	text-decoration: inherit;
 }
+
+.editor-styles-wrapper .wp-block-button .wp-block-button__link {
+	// The following styles smooth out the experience editing borders for individual
+	// buttons. They override the `button-width: 0;` applied by core's theme.json
+	// via the Elements API button.
+	&:where(.has-border-color) {
+		border-width: initial;
+	}
+	&:where([style*="border-top-color"]) {
+		border-top-width: initial;
+	}
+	&:where([style*="border-right-color"]) {
+		border-right-width: initial;
+	}
+	&:where([style*="border-bottom-color"]) {
+		border-bottom-width: initial;
+	}
+	&:where([style*="border-left-color"]) {
+		border-left-width: initial;
+	}
+
+	&:where([style*="border-style"]) {
+		border-width: initial;
+	}
+	&:where([style*="border-top-style"]) {
+		border-top-width: initial;
+	}
+	&:where([style*="border-right-style"]) {
+		border-right-width: initial;
+	}
+	&:where([style*="border-bottom-style"]) {
+		border-bottom-width: initial;
+	}
+	&:where([style*="border-left-style"]) {
+		border-left-width: initial;
+	}
+}

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

@@ -92,7 +92,6 @@ $blocks-block__margin: 0.5em;
 	border-radius: 0;
 }
 
-
 // the first selector is required for old buttons markup
 .wp-block-button.no-border-radius,
 .wp-block-button__link.no-border-radius {
@@ -116,3 +115,40 @@ $blocks-block__margin: 0.5em;
 	// background-image is required to overwrite a gradient background
 	background-image: none;
 }
+
+.wp-block-button .wp-block-button__link {
+	// The following styles ensure a default border is applied when the user
+	// selects only a border color or style. This overcomes the zero border
+	// width applied by core's theme.json via the elements API.
+	&:where(.has-border-color) {
+		border-width: initial;
+	}
+	&:where([style*="border-top-color"]) {
+		border-top-width: initial;
+	}
+	&:where([style*="border-right-color"]) {
+		border-right-width: initial;
+	}
+	&:where([style*="border-bottom-color"]) {
+		border-bottom-width: initial;
+	}
+	&:where([style*="border-left-color"]) {
+		border-left-width: initial;
+	}
+
+	&:where([style*="border-style"]) {
+		border-width: initial;
+	}
+	&:where([style*="border-top-style"]) {
+		border-top-width: initial;
+	}
+	&:where([style*="border-right-style"]) {
+		border-right-width: initial;
+	}
+	&:where([style*="border-bottom-style"]) {
+		border-bottom-width: initial;
+	}
+	&:where([style*="border-left-style"]) {
+		border-left-width: initial;
+	}
+}