Try adding some default fallbacks

When a user first sets a border width or color their may not be a border style set. These changes aim to provide a fallback for that (in the frontend/block editor) or apply a border style by default in the site editor for Global Styles.

packages/block-library/src/common.scss

@@ -89,3 +89,22 @@
 	width: auto;
 	z-index: 100000;
 }
+
+/**
+ * The following provide a simple means of applying a default border style when
+ * a user first makes a selection in the border block support panel.
+ * This prevents issues such as where the user could set a border width
+ * and see no border due there being no border style set.
+ *
+ * This is intended to be removed once intelligent defaults can be set while
+ * making border selections via the block support.
+ *
+ * See: https://github.com/WordPress/gutenberg/pull/33743
+ */
+html :where(.has-border-color) {
+	border-style: solid;
+}
+
+html :where([style*="border-width"]) {
+	border-style: solid;
+}

packages/edit-site/src/components/global-styles/border-panel.js

@@ -128,6 +128,16 @@ export default function BorderPanel( { name } ) {
 		setBorderWidth( undefined );
 	};
 
+	// When we set a border color or width ensure we have a style so the user
+	// can see a visible border.
+	const handleOnChangeWithStyle = ( setStyle ) => ( value ) => {
+		if ( !! value && ! borderStyle ) {
+			setBorderStyle( 'solid' );
+		}
+
+		setStyle( value || undefined );
+	};
+
 	return (
 		<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>
 			{ showBorderWidth && (
@@ -142,7 +152,7 @@ export default function BorderPanel( { name } ) {
 						value={ borderWidthValue }
 						label={ __( 'Width' ) }
 						min={ MIN_BORDER_WIDTH }
-						onChange={ handleOnChange( setBorderWidth ) }
+						onChange={ handleOnChangeWithStyle( setBorderWidth ) }
 						units={ units }
 					/>
 				</ToolsPanelItem>
@@ -175,7 +185,9 @@ export default function BorderPanel( { name } ) {
 						gradients={ undefined }
 						disableCustomColors={ disableCustomColors }
 						disableCustomGradients={ disableCustomGradients }
-						onColorChange={ handleOnChange( setBorderColor ) }
+						onColorChange={ handleOnChangeWithStyle(
+							setBorderColor
+						) }
 						clearable={ false }
 					/>
 				</ToolsPanelItem>