diff --git a/apps/builder/app/builder/features/style-panel/controls/menu/menu-control.tsx b/apps/builder/app/builder/features/style-panel/controls/menu/menu-control.tsx
index 33eee7667678..22c563ccfcc4 100644
--- a/apps/builder/app/builder/features/style-panel/controls/menu/menu-control.tsx
+++ b/apps/builder/app/builder/features/style-panel/controls/menu/menu-control.tsx
@@ -1,9 +1,5 @@
 import { useState } from "react";
-import {
-  toValue,
-  type CssProperty,
-  type StyleProperty,
-} from "@webstudio-is/css-engine";
+import { toValue, type CssProperty } from "@webstudio-is/css-engine";
 import type { IconComponent } from "@webstudio-is/icons";
 import {
   Box,
@@ -32,7 +28,7 @@ export const MenuControl = ({
   property,
   items,
 }: {
-  property: StyleProperty | CssProperty;
+  property: CssProperty;
   items: Array<{
     name: string;
     label: string;
diff --git a/apps/builder/app/builder/features/style-panel/controls/toggle-group/toggle-group-control.tsx b/apps/builder/app/builder/features/style-panel/controls/toggle-group/toggle-group-control.tsx
index eb452fea18d8..2ad50df04aa3 100644
--- a/apps/builder/app/builder/features/style-panel/controls/toggle-group/toggle-group-control.tsx
+++ b/apps/builder/app/builder/features/style-panel/controls/toggle-group/toggle-group-control.tsx
@@ -103,7 +103,7 @@ export const ToggleGroupControl = ({
   items,
 }: {
   label?: string;
-  properties: [StyleProperty, ...StyleProperty[]];
+  properties: [CssProperty | StyleProperty, ...(CssProperty | StyleProperty)[]];
   items: Array<{
     child: JSX.Element;
     value: string;
diff --git a/apps/builder/app/builder/features/style-panel/controls/toggle/toggle-control.tsx b/apps/builder/app/builder/features/style-panel/controls/toggle/toggle-control.tsx
index 960f1d4a8edf..be92ef2539e7 100644
--- a/apps/builder/app/builder/features/style-panel/controls/toggle/toggle-control.tsx
+++ b/apps/builder/app/builder/features/style-panel/controls/toggle/toggle-control.tsx
@@ -3,11 +3,7 @@ import {
   camelCaseProperty,
   declarationDescriptions,
 } from "@webstudio-is/css-data";
-import {
-  toValue,
-  type CssProperty,
-  type StyleProperty,
-} from "@webstudio-is/css-engine";
+import { toValue, type CssProperty } from "@webstudio-is/css-engine";
 import type { IconComponent } from "@webstudio-is/icons";
 import { humanizeString } from "~/shared/string-utils";
 import { setProperty } from "../../shared/use-style-data";
@@ -18,7 +14,7 @@ export const ToggleControl = ({
   property,
   items,
 }: {
-  property: StyleProperty | CssProperty;
+  property: CssProperty;
   items: Array<{
     name: string;
     label: string;
diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts b/apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts
index c49cf28d5ae8..27489d872825 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts
@@ -60,12 +60,12 @@ export const $advancedStylesLonghands = computed(
     const visualProperties = new Set<CssProperty>([]);
     for (const { properties } of sections.values()) {
       for (const property of properties) {
-        visualProperties.add(hyphenateProperty(property) as CssProperty);
+        visualProperties.add(hyphenateProperty(property));
       }
     }
     for (const style of definedStyles) {
       const { property, value, listed } = style;
-      const hyphenatedProperty = hyphenateProperty(property) as CssProperty;
+      const hyphenatedProperty = hyphenateProperty(property);
       // When property is listed, it was added from advanced panel.
       // If we are in advanced mode, we show them all.
       if (
diff --git a/apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx b/apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx
index e949a446cb78..e1175682b314 100644
--- a/apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx
@@ -7,7 +7,7 @@ import {
   FloatingPanel,
 } from "@webstudio-is/design-system";
 import { toValue } from "@webstudio-is/css-engine";
-import type { StyleProperty } from "@webstudio-is/css-engine";
+import type { CssProperty } from "@webstudio-is/css-engine";
 import {
   ToggleGroupControl,
   ToggleGroupTooltip,
@@ -37,12 +37,12 @@ import { useComputedStyleDecl, useComputedStyles } from "../../shared/model";
 import { createBatchUpdate, setProperty } from "../../shared/use-style-data";
 
 export const properties = [
-  "flexShrink",
-  "flexGrow",
-  "flexBasis",
-  "alignSelf",
+  "flex-shrink",
+  "flex-grow",
+  "flex-basis",
+  "align-self",
   "order",
-] satisfies [StyleProperty, ...StyleProperty[]];
+] satisfies [CssProperty, ...CssProperty[]];
 
 export const Section = () => {
   return (
@@ -62,11 +62,11 @@ const FlexChildSectionAlign = () => {
       <PropertyLabel
         label="Align"
         description={propertyDescriptions.alignSelf}
-        properties={["alignSelf"]}
+        properties={["align-self"]}
       />
       <ToggleGroupControl
         label="Align"
-        properties={["alignSelf"]}
+        properties={["align-self"]}
         items={[
           {
             child: <XSmallIcon />,
@@ -122,7 +122,7 @@ const getSizingValue = (flexGrow: string, flexShrink: string) => {
 };
 
 const FlexChildSectionSizing = () => {
-  const styles = useComputedStyles(["flexGrow", "flexShrink", "flexBasis"]);
+  const styles = useComputedStyles(["flex-grow", "flex-shrink", "flex-basis"]);
   const [flexGrow, flexShrink, flexBasis] = styles;
   const styleValueSource = getPriorityStyleValueSource(styles);
   const selectedValue = getSizingValue(
@@ -176,7 +176,7 @@ const FlexChildSectionSizing = () => {
       <PropertyLabel
         label="Sizing"
         description="Specifies the ability of a flex item to grow, shrink, or set its initial size within a flex container."
-        properties={["flexGrow", "flexShrink", "flexBasis"]}
+        properties={["flex-grow", "flex-shrink", "flex-basis"]}
       />
 
       {/* We don't support "flex" shorthand and
@@ -202,12 +202,12 @@ const FlexChildSectionSizing = () => {
             flexShrink = 1;
           }
           if (flexGrow !== undefined && flexShrink !== undefined) {
-            batch.setProperty("flexGrow")({
+            batch.setProperty("flex-grow")({
               type: "unit",
               value: flexGrow,
               unit: "number",
             });
-            batch.setProperty("flexShrink")({
+            batch.setProperty("flex-shrink")({
               type: "unit",
               value: flexShrink,
               unit: "number",
@@ -227,7 +227,7 @@ const FlexChildSectionSizing = () => {
             label="Sizing"
             code={item.codeLines.join("\n")}
             description={item.description}
-            properties={["flexGrow", "flexShrink", "flexBasis"]}
+            properties={["flex-grow", "flex-shrink", "flex-basis"]}
           >
             <ToggleGroupButton
               aria-checked={item.value === selectedValue}
@@ -263,27 +263,27 @@ const FlexChildSectionSizingPopover = () => {
         >
           <Grid css={{ gridTemplateColumns: "auto", gap: theme.spacing[3] }}>
             <PropertyLabel
-              properties={["flexGrow"]}
+              properties={["flex-grow"]}
               description={propertyDescriptions.flexGrow}
               label="Grow"
             />
-            <TextControl property="flexGrow" />
+            <TextControl property="flex-grow" />
           </Grid>
           <Grid css={{ gridTemplateColumns: "auto", gap: theme.spacing[3] }}>
             <PropertyLabel
               label="Shrink"
               description={propertyDescriptions.flexShrink}
-              properties={["flexShrink"]}
+              properties={["flex-shrink"]}
             />
-            <TextControl property="flexShrink" />
+            <TextControl property="flex-shrink" />
           </Grid>
           <Grid css={{ gridTemplateColumns: "auto", gap: theme.spacing[3] }}>
             <PropertyLabel
               label="Basis"
               description={propertyDescriptions.flexBasis}
-              properties={["flexBasis"]}
+              properties={["flex-basis"]}
             />
-            <TextControl property="flexBasis" />
+            <TextControl property="flex-basis" />
           </Grid>
         </Grid>
       }
@@ -367,7 +367,7 @@ const FlexChildSectionOrder = () => {
             label="Sizing"
             code={item.code}
             description={item.description}
-            properties={["flexGrow", "flexShrink", "flexBasis"]}
+            properties={["flex-grow", "flex-shrink", "flex-basis"]}
           >
             <ToggleGroupButton
               aria-checked={
diff --git a/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx b/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx
index 6f31b175ff54..9bb505858279 100644
--- a/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx
@@ -9,7 +9,7 @@ import {
   Tooltip,
 } from "@webstudio-is/design-system";
 import { propertyDescriptions } from "@webstudio-is/css-data";
-import type { StyleProperty, StyleValue } from "@webstudio-is/css-engine";
+import type { CssProperty, StyleValue } from "@webstudio-is/css-engine";
 import { toValue } from "@webstudio-is/css-engine";
 import {
   Link2Icon,
@@ -39,7 +39,6 @@ import {
   AlignContentSpaceBetweenIcon,
   AlignContentStretchIcon,
 } from "@webstudio-is/icons";
-import { FlexGrid } from "./shared/flex-grid";
 import { MenuControl, SelectControl } from "../../controls";
 import { styleConfigByName } from "../../shared/configs";
 import { createBatchUpdate, deleteProperty } from "../../shared/use-style-data";
@@ -56,6 +55,7 @@ import {
   $availableUnitVariables,
 } from "../../shared/model";
 import type { ComputedStyleDecl } from "~/shared/style-object-model";
+import { FlexGrid } from "./shared/flex-grid";
 
 const GapLinked = ({
   isLinked,
@@ -131,7 +131,7 @@ const GapInput = ({
   onReset,
 }: {
   icon: JSX.Element;
-  property: StyleProperty;
+  property: CssProperty;
   styleDecl: ComputedStyleDecl;
   intermediateValue?: StyleValue | IntermediateStyleValue;
   onIntermediateChange: (value?: StyleValue | IntermediateStyleValue) => void;
@@ -194,7 +194,7 @@ const GapInput = ({
 };
 
 const FlexGap = () => {
-  const [columnGap, rowGap] = useComputedStyles(["columnGap", "rowGap"]);
+  const [columnGap, rowGap] = useComputedStyles(["column-gap", "row-gap"]);
   const [isLinked, setIsLinked] = useState(
     () => toValue(columnGap.cascadedValue) === toValue(rowGap.cascadedValue)
   );
@@ -212,27 +212,27 @@ const FlexGap = () => {
         gridTemplateColumns: "4fr 1fr 4fr",
         gridTemplateRows: "auto",
         gridTemplateAreas: `
-          "columnGap linked rowGap"
+          "column-gap linked row-gap"
         `,
         alignItems: "center",
       }}
     >
-      <Box css={{ gridArea: "columnGap" }}>
+      <Box css={{ gridArea: "column-gap" }}>
         <GapInput
           icon={
             <GapHorizontalIcon
               onClick={(event) => {
                 if (event.altKey) {
                   event.preventDefault();
-                  deleteProperty("columnGap");
+                  deleteProperty("column-gap");
                   if (isLinked) {
-                    deleteProperty("rowGap");
+                    deleteProperty("row-gap");
                   }
                 }
               }}
             />
           }
-          property="columnGap"
+          property="column-gap"
           styleDecl={columnGap}
           intermediateValue={intermediateColumnGap}
           onIntermediateChange={(value) => {
@@ -243,32 +243,32 @@ const FlexGap = () => {
           }}
           onReset={() => {
             const batch = createBatchUpdate();
-            batch.deleteProperty("columnGap");
+            batch.deleteProperty("column-gap");
             if (isLinked) {
-              batch.deleteProperty("rowGap");
+              batch.deleteProperty("row-gap");
             }
             batch.publish();
           }}
           onPreviewChange={(value) => {
             const batch = createBatchUpdate();
             if (value === undefined) {
-              batch.deleteProperty("columnGap");
+              batch.deleteProperty("column-gap");
               if (isLinked) {
-                batch.deleteProperty("rowGap");
+                batch.deleteProperty("row-gap");
               }
             } else {
-              batch.setProperty("columnGap")(value);
+              batch.setProperty("column-gap")(value);
               if (isLinked) {
-                batch.setProperty("rowGap")(value);
+                batch.setProperty("row-gap")(value);
               }
             }
             batch.publish({ isEphemeral: true });
           }}
           onChange={(value) => {
             const batch = createBatchUpdate();
-            batch.setProperty("columnGap")(value);
+            batch.setProperty("column-gap")(value);
             if (isLinked) {
-              batch.setProperty("rowGap")(value);
+              batch.setProperty("row-gap")(value);
             }
             batch.publish();
           }}
@@ -291,33 +291,33 @@ const FlexGap = () => {
               rowGap.source.name === "overwritten";
             if (isColumnGapDefined) {
               const batch = createBatchUpdate();
-              batch.setProperty("rowGap")(columnGap.cascadedValue);
+              batch.setProperty("row-gap")(columnGap.cascadedValue);
               batch.publish();
             } else if (isRowGapDefined) {
               const batch = createBatchUpdate();
-              batch.setProperty("columnGap")(rowGap.cascadedValue);
+              batch.setProperty("column-gap")(rowGap.cascadedValue);
               batch.publish();
             }
           }}
         />
       </Flex>
 
-      <Box css={{ gridArea: "rowGap" }}>
+      <Box css={{ gridArea: "row-gap" }}>
         <GapInput
           icon={
             <GapVerticalIcon
               onClick={(event) => {
                 if (event.altKey) {
                   event.preventDefault();
-                  deleteProperty("rowGap");
+                  deleteProperty("row-gap");
                   if (isLinked) {
-                    deleteProperty("columnGap");
+                    deleteProperty("column-gap");
                   }
                 }
               }}
             />
           }
-          property="rowGap"
+          property="row-gap"
           styleDecl={rowGap}
           intermediateValue={intermediateRowGap}
           onIntermediateChange={(value) => {
@@ -328,32 +328,32 @@ const FlexGap = () => {
           }}
           onReset={() => {
             const batch = createBatchUpdate();
-            batch.deleteProperty("rowGap");
+            batch.deleteProperty("row-gap");
             if (isLinked) {
-              batch.deleteProperty("columnGap");
+              batch.deleteProperty("column-gap");
             }
             batch.publish();
           }}
           onPreviewChange={(value) => {
             const batch = createBatchUpdate();
             if (value === undefined) {
-              batch.deleteProperty("rowGap");
+              batch.deleteProperty("row-gap");
               if (isLinked) {
-                batch.deleteProperty("columnGap");
+                batch.deleteProperty("column-gap");
               }
             } else {
-              batch.setProperty("rowGap")(value);
+              batch.setProperty("row-gap")(value);
               if (isLinked) {
-                batch.setProperty("columnGap")(value);
+                batch.setProperty("column-gap")(value);
               }
             }
             batch.publish({ isEphemeral: true });
           }}
           onChange={(value) => {
             const batch = createBatchUpdate();
-            batch.setProperty("rowGap")(value);
+            batch.setProperty("row-gap")(value);
             if (isLinked) {
-              batch.setProperty("columnGap")(value);
+              batch.setProperty("column-gap")(value);
             }
             batch.publish();
           }}
@@ -364,7 +364,7 @@ const FlexGap = () => {
 };
 
 const LayoutSectionFlex = () => {
-  const flexWrap = useComputedStyleDecl("flexWrap");
+  const flexWrap = useComputedStyleDecl("flex-wrap");
   const flexWrapValue = toValue(flexWrap.cascadedValue);
 
   return (
@@ -374,7 +374,7 @@ const LayoutSectionFlex = () => {
         <Flex direction="column" justify="between">
           <Flex css={{ gap: theme.spacing[7] }}>
             <MenuControl
-              property="flexDirection"
+              property="flex-direction"
               items={[
                 { name: "row", label: "Row", icon: ArrowRightIcon },
                 {
@@ -391,7 +391,7 @@ const LayoutSectionFlex = () => {
               ]}
             />
             <ToggleControl
-              property="flexWrap"
+              property="flex-wrap"
               items={[
                 { name: "nowrap", label: "No Wrap", icon: NoWrapIcon },
                 { name: "wrap", label: "Wrap", icon: WrapIcon },
@@ -400,7 +400,7 @@ const LayoutSectionFlex = () => {
           </Flex>
           <Flex css={{ gap: theme.spacing[7] }}>
             <MenuControl
-              property="alignItems"
+              property="align-items"
               items={[
                 {
                   name: "stretch",
@@ -426,7 +426,7 @@ const LayoutSectionFlex = () => {
               ]}
             />
             <MenuControl
-              property="justifyContent"
+              property="justify-content"
               items={[
                 {
                   name: "space-between",
@@ -457,7 +457,7 @@ const LayoutSectionFlex = () => {
             />
             {(flexWrapValue === "wrap" || flexWrapValue === "wrap-reverse") && (
               <MenuControl
-                property="alignContent"
+                property="align-content"
                 items={[
                   {
                     name: "space-between",
@@ -508,14 +508,14 @@ const orderedDisplayValues = [
 
 export const properties = [
   "display",
-  "flexDirection",
-  "flexWrap",
-  "alignItems",
-  "justifyContent",
-  "alignContent",
-  "rowGap",
-  "columnGap",
-] satisfies Array<StyleProperty>;
+  "flex-direction",
+  "flex-wrap",
+  "align-items",
+  "justify-content",
+  "align-content",
+  "row-gap",
+  "column-gap",
+] satisfies Array<CssProperty>;
 
 export const Section = () => {
   const display = useComputedStyleDecl("display");
diff --git a/apps/builder/app/builder/features/style-panel/sections/layout/shared/flex-grid.tsx b/apps/builder/app/builder/features/style-panel/sections/layout/shared/flex-grid.tsx
index ceff12012706..32499660a40a 100644
--- a/apps/builder/app/builder/features/style-panel/sections/layout/shared/flex-grid.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/layout/shared/flex-grid.tsx
@@ -34,9 +34,9 @@ const shouldHideDot = ({
 
 export const FlexGrid = () => {
   const styles = useComputedStyles([
-    "flexDirection",
-    "justifyContent",
-    "alignItems",
+    "flex-direction",
+    "justify-content",
+    "align-items",
   ]);
   const styleValueSourceColor = getPriorityStyleValueSource(styles);
   const [flexDirection, justifyContent, alignItems] = styles;
@@ -127,11 +127,11 @@ export const FlexGrid = () => {
                 const justifyContent = alignment[x];
                 const alignItems = alignment[y];
                 const batch = createBatchUpdate();
-                batch.setProperty("alignItems")({
+                batch.setProperty("align-items")({
                   type: "keyword",
                   value: alignItems,
                 });
-                batch.setProperty("justifyContent")({
+                batch.setProperty("justify-content")({
                   type: "keyword",
                   value: justifyContent,
                 });
diff --git a/apps/builder/app/builder/features/style-panel/sections/sections.ts b/apps/builder/app/builder/features/style-panel/sections/sections.ts
index 70d7dd83efa5..119a72a3ad5c 100644
--- a/apps/builder/app/builder/features/style-panel/sections/sections.ts
+++ b/apps/builder/app/builder/features/style-panel/sections/sections.ts
@@ -16,12 +16,12 @@ import * as advanced from "./advanced/advanced";
 import * as textShadows from "./text-shadows/text-shadows";
 import * as backdropFilter from "./backdrop-filter/backdrop-filter";
 import * as transforms from "./transforms/transforms";
-import type { StyleProperty } from "@webstudio-is/css-engine";
+import type { CssProperty, StyleProperty } from "@webstudio-is/css-engine";
 
 export const sections = new Map<
   string,
   {
-    properties: StyleProperty[];
+    properties: (StyleProperty | CssProperty)[];
     Section: () => ReactNode;
   }
 >([
diff --git a/apps/builder/app/builder/features/style-panel/sections/size/size.tsx b/apps/builder/app/builder/features/style-panel/sections/size/size.tsx
index 1ec33bc72f4a..74d7b213ebd2 100644
--- a/apps/builder/app/builder/features/style-panel/sections/size/size.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/size/size.tsx
@@ -2,7 +2,7 @@ import {
   camelCaseProperty,
   propertyDescriptions,
 } from "@webstudio-is/css-data";
-import type { CssProperty, StyleProperty } from "@webstudio-is/css-engine";
+import type { CssProperty } from "@webstudio-is/css-engine";
 import {
   Flex,
   Grid,
@@ -10,6 +10,7 @@ import {
   Separator,
   styled,
   FloatingPanel,
+  theme,
 } from "@webstudio-is/design-system";
 import { PositionControl, SelectControl, TextControl } from "../../controls";
 import {
@@ -20,18 +21,13 @@ import {
   EllipsesIcon,
 } from "@webstudio-is/icons";
 import { StyleSection } from "../../shared/style-section";
-import { theme } from "@webstudio-is/design-system";
 import { ToggleGroupControl } from "../../controls/toggle-group/toggle-group-control";
 import { humanizeString } from "~/shared/string-utils";
 import { PropertyLabel } from "../../property-label";
 import { useComputedStyleDecl } from "../../shared/model";
 import { deleteProperty } from "../../shared/use-style-data";
 
-const SizeProperty = ({
-  property,
-}: {
-  property: StyleProperty | CssProperty;
-}) => {
+const SizeProperty = ({ property }: { property: CssProperty }) => {
   return (
     <Grid gap={1}>
       <PropertyLabel
@@ -45,7 +41,7 @@ const SizeProperty = ({
 };
 
 const ObjectPosition = () => {
-  const styleDecl = useComputedStyleDecl("objectPosition");
+  const styleDecl = useComputedStyleDecl("object-position");
   return (
     <Flex justify="end">
       <FloatingPanel
@@ -53,7 +49,7 @@ const ObjectPosition = () => {
         placement="bottom"
         content={
           <Flex css={{ padding: theme.panel.padding }}>
-            <PositionControl property="objectPosition" styleDecl={styleDecl} />
+            <PositionControl property="object-position" styleDecl={styleDecl} />
           </Flex>
         }
       >
@@ -62,7 +58,7 @@ const ObjectPosition = () => {
           onClick={(event) => {
             if (event.altKey) {
               event.preventDefault();
-              deleteProperty("objectPosition");
+              deleteProperty("object-position");
             }
           }}
         >
@@ -76,16 +72,16 @@ const ObjectPosition = () => {
 export const properties = [
   "width",
   "height",
-  "minWidth",
-  "minHeight",
-  "maxWidth",
-  "maxHeight",
-  "overflowX",
-  "overflowY",
-  "objectFit",
-  "objectPosition",
-  "aspectRatio",
-] satisfies Array<StyleProperty>;
+  "min-width",
+  "min-height",
+  "max-width",
+  "max-height",
+  "overflow-x",
+  "overflow-y",
+  "object-fit",
+  "object-position",
+  "aspect-ratio",
+] satisfies Array<CssProperty>;
 
 const SectionLayout = styled(Grid, {
   columnGap: theme.spacing[5],
@@ -99,27 +95,27 @@ export const Section = () => {
       <SectionLayout columns={2}>
         <SizeProperty property="width" />
         <SizeProperty property="height" />
-        <SizeProperty property="minWidth" />
-        <SizeProperty property="minHeight" />
-        <SizeProperty property="maxWidth" />
-        <SizeProperty property="maxHeight" />
+        <SizeProperty property="min-width" />
+        <SizeProperty property="min-height" />
+        <SizeProperty property="max-width" />
+        <SizeProperty property="max-height" />
         <PropertyLabel
           label="Aspect Ratio"
           description={propertyDescriptions.aspectRatio}
-          properties={["aspectRatio"]}
+          properties={["aspect-ratio"]}
         />
-        <TextControl property="aspectRatio" />
+        <TextControl property="aspect-ratio" />
       </SectionLayout>
       <Separator />
       <SectionLayout columns={2}>
         <PropertyLabel
           label="Overflow"
           description={propertyDescriptions.overflow}
-          properties={["overflowX", "overflowY"]}
+          properties={["overflow-x", "overflow-y"]}
         />
         <ToggleGroupControl
           label="Overflow"
-          properties={["overflowX", "overflowY"]}
+          properties={["overflow-x", "overflow-y"]}
           items={[
             {
               child: <EyeOpenIcon />,
@@ -151,13 +147,13 @@ export const Section = () => {
         <PropertyLabel
           label="Object Fit"
           description={propertyDescriptions.objectFit}
-          properties={["objectFit"]}
+          properties={["object-fit"]}
         />
-        <SelectControl property="objectFit" />
+        <SelectControl property="object-fit" />
         <PropertyLabel
           label="Object Position"
           description={propertyDescriptions.objectPosition}
-          properties={["objectPosition"]}
+          properties={["object-position"]}
         />
         <ObjectPosition />
       </SectionLayout>