Add border style as an explicit option to prevent issues with dynamically adding it via the styleable helper

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",

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 }