diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index 3425aca890..229bc24083 100644
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss
@@ -481,6 +481,10 @@
   margin: 5px 4px 0 0;
   width: 20px;
 
+  &.color-name {
+      border-radius: 10px;
+  }
+
   &.palette-th {
     align-items: center;
     border: 1px solid $color-gray-30;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
index d5f62839d2..b41b9ae483 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -117,8 +117,8 @@
 
     [:div.row-flex.color-data
      [:span.color-th
-      {:style {:background-color (-> value value-to-background)
-               :border-radius (if (:id color) "10px" "inherit")}
+      {:class (when (:id color) "color-name")
+       :style {:background-color (-> value value-to-background)}
        :on-click (color-picker-callback @state handle-pick-color disable-opacity)}
       (when (= value :multiple) "?")]