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

Move border styles on banner from main to desktop/mobile_image

Author: danmooney2

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

@@ -23,10 +23,6 @@
                         reader="Magento_PageBuilder/js/master-format/read/configurable">
                 <elements>
                     <element name="main">
-                        <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
-                        <style name="border_color" source="border_color"/>
-                        <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
-                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="display" source="display" converter="Magento_PageBuilder/js/converter/style/display" preview_converter="Magento_PageBuilder/js/converter/style/preview/display"/>
                         <style name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
                         <attribute name="name" source="data-role"/>
@@ -48,6 +44,10 @@
                         <attribute name="virtual_overlay_transparency" storage_key="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/banner/converter/attribute/overlay-color-transparency" persistence_mode="write"/>
                     </element>
                     <element name="desktop_image">
+                        <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
+                        <style name="border_color" source="border_color"/>
+                        <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
+                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="text_align" source="text_align"/>
                         <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="background_color" source="background_color"/>
@@ -59,6 +59,10 @@
                         <style name="margins_and_padding" source="padding" converter="Magento_PageBuilder/js/converter/style/paddings" persistence_mode="write"/>
                     </element>
                     <element name="mobile_image">
+                        <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
+                        <style name="border_color" source="border_color"/>
+                        <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
+                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="text_align" source="text_align"/>
                         <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="background_color" source="background_color"/>
@@ -98,10 +102,6 @@
                         reader="Magento_PageBuilder/js/master-format/read/configurable">
                 <elements>
                     <element name="main">
-                        <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
-                        <style name="border_color" source="border_color"/>
-                        <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
-                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="display" source="display" converter="Magento_PageBuilder/js/converter/style/display" preview_converter="Magento_PageBuilder/js/converter/style/preview/display"/>
                         <style name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
                         <attribute name="name" source="data-role"/>
@@ -123,6 +123,10 @@
                         <attribute name="virtual_overlay_transparency" storage_key="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/banner/converter/attribute/overlay-color-transparency" persistence_mode="write"/>
                     </element>
                     <element name="desktop_image">
+                        <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
+                        <style name="border_color" source="border_color"/>
+                        <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
+                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="text_align" source="text_align"/>
                         <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="background_color" source="background_color"/>
@@ -134,6 +138,10 @@
                         <style name="margins_and_padding" source="padding" converter="Magento_PageBuilder/js/converter/style/paddings" persistence_mode="write"/>
                     </element>
                     <element name="mobile_image">
+                        <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
+                        <style name="border_color" source="border_color"/>
+                        <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
+                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="text_align" source="text_align"/>
                         <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="background_color" source="background_color"/>
@@ -173,10 +181,6 @@
                         reader="Magento_PageBuilder/js/master-format/read/configurable">
                 <elements>
                     <element name="main">
-                        <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
-                        <style name="border_color" source="border_color"/>
-                        <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
-                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="display" source="display" converter="Magento_PageBuilder/js/converter/style/display" preview_converter="Magento_PageBuilder/js/converter/style/preview/display"/>
                         <style name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
                         <attribute name="name" source="data-role"/>
@@ -198,6 +202,10 @@
                         <attribute name="virtual_overlay_transparency" storage_key="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/banner/converter/attribute/overlay-color-transparency" persistence_mode="write"/>
                     </element>
                     <element name="desktop_image">
+                        <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
+                        <style name="border_color" source="border_color"/>
+                        <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
+                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="text_align" source="text_align"/>
                         <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="background_color" source="background_color"/>
@@ -209,6 +217,10 @@
                         <style name="margins_and_padding" source="padding" converter="Magento_PageBuilder/js/converter/style/paddings" persistence_mode="write"/>
                     </element>
                     <element name="mobile_image">
+                        <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
+                        <style name="border_color" source="border_color"/>
+                        <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
+                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="text_align" source="text_align"/>
                         <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="background_color" source="background_color"/>
@@ -249,10 +261,6 @@
                         reader="Magento_PageBuilder/js/master-format/read/configurable">
                 <elements>
                     <element name="main">
-                        <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
-                        <style name="border_color" source="border_color"/>
-                        <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
-                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="display" source="display" converter="Magento_PageBuilder/js/converter/style/display" preview_converter="Magento_PageBuilder/js/converter/style/preview/display"/>
                         <style name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
                         <attribute name="name" source="data-role"/>
@@ -276,6 +284,10 @@
                         <attribute name="virtual_overlay_transparency" storage_key="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/banner/converter/attribute/overlay-color-transparency" persistence_mode="write"/>
                     </element>
                     <element name="desktop_image">
+                        <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
+                        <style name="border_color" source="border_color"/>
+                        <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
+                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="text_align" source="text_align"/>
                         <style name="background_color" source="background_color"/>
                         <style name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
@@ -285,6 +297,10 @@
                         <style name="background_attachment" source="background_attachment"/>
                     </element>
                     <element name="mobile_image">
+                        <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
+                        <style name="border_color" source="border_color"/>
+                        <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
+                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="text_align" source="text_align"/>
                         <style name="background_color" source="background_color"/>
                         <style name="mobile_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>