MC-3870: Background does not conform to border radius for banner, image, contained row & video

Add/utilize overlay-border-radius converter to fix overlay border radius

Author: danmooney2

app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/banner.xml

@@ -276,6 +276,7 @@
                         <attribute name="virtual_link_type" storage_key="link_url" source="data-link-type" converter="Magento_PageBuilder/js/converter/attribute/link-type" persistence_mode="write"/>
                     </element>
                     <element name="overlay">
+                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/overlay-border-radius"/>
                         <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="background_color" source="background_color" converter="Magento_PageBuilder/js/content-type/banner/converter/style/overlay-background-color" persistence_mode="write"/>
                         <style name="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_default.less

@@ -15,7 +15,6 @@
         -moz-transition: background-color 500ms ease;
         -o-transition: background-color 500ms ease;
         -webkit-transition: background-color 500ms ease;
-        border-radius: inherit;
         transition: background-color 500ms ease;
     }
 

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/converter/style/overlay-border-radius.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import {DataObject} from "../../data-store";
+import ConverterInterface from "../converter-interface";
+
+/**
+ * Takes difference of border width from border radius to conform snugly to edges of wrapper border
+ *
+ * @api
+ */
+export default class OverlayBorderRadius implements ConverterInterface {
+    /**
+     * Convert value to internal format
+     *
+     * @param value string
+     * @returns {string}
+     */
+    public fromDom(value: string): string | object {
+        return value;
+    }
+
+    /**
+     * Convert value to knockout format
+     *
+     * @param {string} name
+     * @param {DataObject} data
+     * @returns {string}
+     */
+    public toDom(name: string, data: DataObject): string | object {
+        const borderRadius = data.border_radius ? parseInt(data.border_radius as string, 10) : 0;
+        const borderWidth = data.border_width ? parseInt(data.border_width as string, 10) : 0;
+
+        if (borderRadius <= borderWidth) {
+            return "0";
+        }
+
+        return (borderRadius - borderWidth) + "px";
+    }
+}