diff --git a/live-editing/configs/ThemingConfigGenerator.ts b/live-editing/configs/ThemingConfigGenerator.ts
index 6715df2815..eaf0e86e97 100644
--- a/live-editing/configs/ThemingConfigGenerator.ts
+++ b/live-editing/configs/ThemingConfigGenerator.ts
@@ -1,3 +1,11 @@
+import {
+    IgxCardComponent,
+    IgxCardContentDirective,
+    IgxCardHeaderComponent,
+    IgxChipComponent,
+    IgxIconComponent,
+    IgxPrefixDirective,
+} from "igniteui-angular";
 import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';;
 export class ThemingConfigGenerator implements IConfigGenerator {
@@ -36,6 +44,12 @@ export class ThemingConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: '/theming/'
         }));
 
+        configs.push(new Config({
+            component: 'RoundnessComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: '/theming/roundness/'
+        }));
+
         configs.push(new Config({
             component: 'AnimationsSampleComponent',
             appConfig: BaseAppConfig,
diff --git a/src/app/theming/roundness/roundness-sample.component.html b/src/app/theming/roundness/roundness-sample.component.html
new file mode 100644
index 0000000000..9c5e2d7802
--- /dev/null
+++ b/src/app/theming/roundness/roundness-sample.component.html
@@ -0,0 +1,25 @@
+<div class="sample-container">
+    <igx-card>
+        <igx-card-header>
+            <pre>--ig-radius-factor: 0;</pre>
+        </igx-card-header>
+        <igx-card-content>
+            <igx-chip class="square-chip">
+                <igx-icon igxPrefix>place</igx-icon>
+                <span>Square Chip</span>
+            </igx-chip>
+        </igx-card-content>
+    </igx-card>
+
+    <igx-card>
+        <igx-card-header>
+            <pre>--ig-radius-factor: 1;</pre>
+        </igx-card-header>
+        <igx-card-content>
+            <igx-chip class="round-chip">
+                <igx-icon igxPrefix>place</igx-icon>
+                <span>Round Chip</span>
+            </igx-chip>
+        </igx-card-content>
+    </igx-card>
+</div>
diff --git a/src/app/theming/roundness/roundness-sample.component.scss b/src/app/theming/roundness/roundness-sample.component.scss
new file mode 100644
index 0000000000..1a7a74f86c
--- /dev/null
+++ b/src/app/theming/roundness/roundness-sample.component.scss
@@ -0,0 +1,17 @@
+@use "igniteui-angular/theming" as *;
+
+.sample-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    gap: rem(16px);
+    padding: rem(32px);
+}
+
+.square-chip {
+    --ig-radius-factor: 0;
+}
+
+.round-chip {
+    --ig-radius-factor: 1;
+}
diff --git a/src/app/theming/roundness/roundness-sample.component.ts b/src/app/theming/roundness/roundness-sample.component.ts
new file mode 100644
index 0000000000..d1c3524afd
--- /dev/null
+++ b/src/app/theming/roundness/roundness-sample.component.ts
@@ -0,0 +1,24 @@
+import { Component } from "@angular/core";
+import {
+    IgxCardComponent,
+    IgxCardContentDirective,
+    IgxCardHeaderComponent,
+    IgxChipComponent,
+    IgxIconComponent,
+    IgxPrefixDirective
+} from "igniteui-angular";
+
+@Component({
+    selector: "app-chip-simple",
+    styleUrls: ["./roundness-sample.component.scss"],
+    templateUrl: "./roundness-sample.component.html",
+    imports: [
+        IgxCardComponent,
+        IgxCardHeaderComponent,
+        IgxCardContentDirective,
+        IgxChipComponent,
+        IgxIconComponent,
+        IgxPrefixDirective
+    ]
+})
+export class RoundnessComponent {}
diff --git a/src/app/theming/theming-routes-data.ts b/src/app/theming/theming-routes-data.ts
index e5a3ac0d92..34a10def49 100644
--- a/src/app/theming/theming-routes-data.ts
+++ b/src/app/theming/theming-routes-data.ts
@@ -8,6 +8,7 @@ export const themingRoutesData = {
     'shadows-sample-2': { displayName: 'Shadows sample 2', parentName: 'Shadows' },
     // eslint-disable-next-line quote-props
     'density': { displayName: 'Display density sample', parentName: 'Themes' },
+    'roundness': { displayName: 'Roundness', parentName: 'Themes' },
     'angular-sample': { displayName: 'Angular Material Theming', parentName: 'Themes' },
     'bootstrap-sample': { displayName: 'Bootstrap Theming', parentName: 'Themes' },
     'card-sample-shadow': { displayName: 'card-sample-shadow', parentName: 'Shadows' }
diff --git a/src/app/theming/theming.routes.ts b/src/app/theming/theming.routes.ts
index 8ba1cc05f9..950958bbe3 100644
--- a/src/app/theming/theming.routes.ts
+++ b/src/app/theming/theming.routes.ts
@@ -5,6 +5,7 @@ import { AngularMaterialComponent } from './angular/angular-sample.component';
 import { BootstrapComponent } from './bootstrap/bootstrap-sample.component';
 import { DefaultThemeSampleComponent } from './default-theme-sample/default-theme-sample.component';
 import { DisplayDensityComponent } from './display-density/display-density.component';
+import { RoundnessComponent } from './roundness/roundness-sample.component';
 import { CardSampleShadowComponent} from './shadows/card-sample-shadow/card-sample-shadow';
 import { ShadowsSampleComponent } from './shadows/shadows-sample-1/shadows-sample.component';
 import { ShadowsSample2Component } from './shadows/shadows-sample-2/shadows-sample-2.component';
@@ -32,6 +33,11 @@ export const ThemingRoutes: Routes = [
         data: themingRoutesData['density'],
         path: 'density'
     },
+    {
+        component: RoundnessComponent,
+        data: themingRoutesData['roundness'],
+        path: 'roundness'
+    },
     {
         component: CardSampleShadowComponent,
         data: themingRoutesData['card-sample-shadow'],