diff --git a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js index 95ca1e52d5..4b30b65fc5 100644 --- a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js +++ b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js @@ -284,7 +284,7 @@ export const background = { export const border = { label: "Border", - columns: "auto 1fr", + columns: "1fr 1fr", settings: [ { label: "Color", @@ -295,17 +295,31 @@ export const border = { label: "Width", key: "border-width", control: Select, + column: "1 / 2", + placeholder: "None", options: [ { label: "Small", value: "1px" }, { label: "Medium", value: "2px" }, { label: "Large", value: "4px" }, ], }, + { + label: "Style", + key: "border-style", + control: Select, + column: "2 / 3", + placeholder: "None", + options: [ + { label: "Solid", value: "solid" }, + { label: "Dotted", value: "dotted" }, + { label: "Dashed", value: "dashed" }, + ], + }, { label: "Radius", key: "border-radius", control: Select, - column: "1 / 3", + placeholder: "None", options: [ { label: "Small", value: "0.25rem" }, { label: "Medium", value: "0.5rem" }, @@ -317,7 +331,7 @@ export const border = { label: "Shadow", key: "box-shadow", control: Select, - column: "1 / 3", + placeholder: "None", options: [ { label: "Small", diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js index 62688e5c07..3f02b36600 100644 --- a/packages/client/src/utils/styleable.js +++ b/packages/client/src/utils/styleable.js @@ -34,11 +34,6 @@ export const styleable = (node, styles = {}) => { baseStyles.overflow = "hidden" } - // Append border-style css if border-width is specified - if (newStyles.normal?.["border-width"]) { - baseStyles["border-style"] = "solid" - } - const componentId = newStyles.id const customStyles = newStyles.custom || "" const normalStyles = { ...baseStyles, ...newStyles.normal }