Refine application of borders and display in editor

This still isn't perfect. The cover content/background appears to be "under" dashed/dotted borders in the editor but are instead contained within them on the frontend.

packages/block-library/src/cover/edit.js

@@ -74,6 +74,7 @@ import {
 	isContentPositionCenter,
 	getPositionClassName,
 } from './shared';
+import cleanEmptyObject from '../utils/clean-empty-object';
 
 extend( [ namesPlugin ] );
 
@@ -653,6 +654,13 @@ function CoverEdit( {
 	const ref = useRef();
 	const blockProps = useBlockProps( { ref } );
 	const borderProps = useBorderProps( attributes );
+	const borderRadiusStyles = cleanEmptyObject( {
+		borderTopLeftRadius: borderProps.style.borderTopLeftRadius,
+		borderTopRightRadius: borderProps.style.borderTopRightRadius,
+		borderBottomLeftRadius: borderProps.style.borderBottomLeftRadius,
+		borderBottomRightRadius: borderProps.style.borderBottomRightRadius,
+		borderRadius: borderProps.style.borderRadius,
+	} );
 
 	// Check for fontSize support before we pass a fontSize attribute to the innerBlocks.
 	const hasFontSizes = !! useSetting( 'typography.fontSizes' )?.length;
@@ -757,6 +765,11 @@ function CoverEdit( {
 					} }
 					showHandle={ isSelected }
 				/>
+				<span
+					aria-hidden="true"
+					className={ 'block-library-cover__border-visualizer' }
+					style={ borderProps.style }
+				/>
 				<span
 					aria-hidden="true"
 					className={ classnames(
@@ -788,7 +801,7 @@ function CoverEdit( {
 						className="wp-block-cover__image-background"
 						alt={ alt }
 						src={ url }
-						style={ mediaStyle }
+						style={ { ...mediaStyle, ...borderRadiusStyles } }
 					/>
 				) }
 				{ url && isVideoBackground && (
@@ -799,7 +812,7 @@ function CoverEdit( {
 						muted
 						loop
 						src={ url }
-						style={ mediaStyle }
+						style={ { ...mediaStyle, ...borderRadiusStyles } }
 					/>
 				) }
 				{ isUploadingMedia && <Spinner /> }

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

@@ -75,7 +75,8 @@
 	margin-left: auto;
 }
 
-.block-library-cover__resize-container {
+.block-library-cover__resize-container,
+.block-library-cover__border-visualizer {
 	position: absolute !important;
 	top: 0;
 	left: 0;
@@ -84,6 +85,10 @@
 	min-height: 50px;
 }
 
+.block-library-cover__border-visualizer {
+	z-index: z-index(".wp-block-cover.has-background-dim::before");
+}
+
 .block-library-cover__resize-container:not(.is-resizing) {
 	// Important is used to have higher specificity than the inline style set by re-resizable library.
 	height: auto !important;