diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs
index e8e1ebcd3..5d5567160 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs
@@ -7,18 +7,14 @@
 (ns app.main.ui.viewer.inspect.attributes.stroke
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.common.data :as d]
-   [app.common.data.macros :as dm]
-   [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.components.title-bar :refer [inspect-title-bar]]
-   [app.main.ui.formats :as fmt]
    [app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
-   [app.util.code-gen.style-css-formats :as cssf]
-   [app.util.code-gen.style-css-values :as cssv]
-   [app.util.color :as uc]
+   [app.util.code-gen.style-css :as css]
    [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
+(def properties [:border])
+
 (defn stroke->color [shape]
   {:color (:stroke-color shape)
    :opacity (:stroke-opacity shape)
@@ -31,30 +27,21 @@
   (seq (:strokes shape)))
 
 (mf/defc stroke-block
-  [{:keys [stroke]}]
-  (let [color-format   (mf/use-state :hex)
-        color          (stroke->color stroke)]
-    [:div {:class (stl/css :attributes-stroke-block)}
-     (let [{:keys [stroke-style stroke-alignment]} stroke
-           stroke-style (if (= stroke-style :svg) :solid stroke-style)
-           stroke-alignment (or stroke-alignment :center)
-           stroke-def (dm/str (fmt/format-pixels (:stroke-width stroke)) " "
-                              (tr (dm/str "inspect.attributes.stroke.style." (or (d/name stroke-style) "none"))) " "
-                              (tr (dm/str "inspect.attributes.stroke.alignment." (d/name stroke-alignment))))]
-
-       [:*
-        [:& color-row {:color color
-                       :format @color-format
-                       :copy-data (uc/color->background color)
-                       :on-change-format #(reset! color-format %)}]
-
-        [:div {:class (stl/css :stroke-row)}
-         [:div {:class (stl/css :global/attr-label)}
-          "Border"]
-         [:div {:class (stl/css :global/attr-value)}
-
-          [:& copy-button {:data (cssf/format-value :border (cssv/get-stroke-data stroke))}
-           [:div {:class (stl/css :button-children)} stroke-def]]]]])]))
+  {::mf/wrap-props false}
+  [{:keys [objects shape]}]
+  (let [format*   (mf/use-state :hex)
+        format    (deref format*)
+        color     (stroke->color shape)
+        on-change
+        (mf/use-fn
+         (fn [format]
+           (reset! format* format)))]
+    [:div {:class (stl/css :attributes-fill-block)}
+     [:& color-row
+      {:color color
+       :format format
+       :on-change-format on-change
+       :copy-data (css/get-shape-properties-css objects {:strokes [shape]} properties)}]]))
 
 (mf/defc stroke-panel
   [{:keys [shapes]}]
@@ -69,4 +56,4 @@
         (for [shape shapes]
           (for [value (:strokes shape)]
             [:& stroke-block {:key (str "stroke-color-" (:id shape) value)
-                              :stroke value}]))]])))
+                              :shape value}]))]])))