diff --git a/packages/calcite-components/src/components/swatch/swatch.e2e.ts b/packages/calcite-components/src/components/swatch/swatch.e2e.ts
index 3d64a0754e4..861b00b627b 100644
--- a/packages/calcite-components/src/components/swatch/swatch.e2e.ts
+++ b/packages/calcite-components/src/components/swatch/swatch.e2e.ts
@@ -151,7 +151,20 @@ describe("calcite-swatch", () => {
   describe("themed", () => {
     describe("default", () => {
       themed(html`calcite-swatch`, {
-        "--calcite-swatch-corner-radius": { shadowSelector: `.${CSS.container}`, targetProp: "borderRadius" },
+        "--calcite-swatch-corner-radius": [
+          { shadowSelector: `.${CSS.container}`, targetProp: "borderRadius" },
+          { shadowSelector: `#${IDS.swatchRect}`, targetProp: "rx" },
+        ],
+      });
+    });
+    describe("solid ", () => {
+      themed(html`<calcite-swatch color="#ff8200"></calcite-swatch>`, {
+        "--calcite-swatch-corner-radius": [{ shadowSelector: `#${IDS.swatchSolid}`, targetProp: "rx" }],
+      });
+    });
+    describe("transparent ", () => {
+      themed(html`<calcite-swatch color="rgba(255, 255, 255, 0.5)"></calcite-swatch>`, {
+        "--calcite-swatch-corner-radius": [{ shadowSelector: `#${IDS.swatchTransparent}`, targetProp: "rx" }],
       });
     });
   });
diff --git a/packages/calcite-components/src/components/swatch/swatch.scss b/packages/calcite-components/src/components/swatch/swatch.scss
index f28ab31d0b8..5c1d56b4598 100644
--- a/packages/calcite-components/src/components/swatch/swatch.scss
+++ b/packages/calcite-components/src/components/swatch/swatch.scss
@@ -126,6 +126,7 @@
   stroke: var(--calcite-color-text-1);
   stroke-width: var(--calcite-border-width-md);
   stroke-opacity: 0.3;
+  rx: var(--calcite-swatch-corner-radius);
 }
 
 .internal-svg-disabled {
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index 6d176ce8a95..a61f2e4313d 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -100,6 +100,8 @@ import { meter, meterTokens } from "./custom-theme/meter";
 import { table, tableTokens } from "./custom-theme/table";
 import { carousel, carouselTokens } from "./custom-theme/carousel";
 import { dialog, dialogTokens } from "./custom-theme/dialog";
+import { swatchGroup, swatchGroupTokens } from "./custom-theme/swatch-group";
+import { swatch, swatchTokens } from "./custom-theme/swatch";
 
 const globalTokens = {
   calciteColorBrand: "#007ac2",
@@ -245,6 +247,12 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
     <div class="demo-row">
       <div class="demo-column">${dialog}</div>
     </div>
+    <div class="demo-row">
+      <div class="demo-column">${swatchGroup}</div>
+    </div>
+    <div class="demo-row">
+      <div class="demo-column">${swatch}</div>
+    </div>
   </div>`;
 
 const componentTokens = {
@@ -314,6 +322,8 @@ const componentTokens = {
   ...tableTokens,
   ...carouselTokens,
   ...dialogTokens,
+  ...swatchGroupTokens,
+  ...swatchTokens,
 };
 
 export default {
diff --git a/packages/calcite-components/src/custom-theme/swatch-group.ts b/packages/calcite-components/src/custom-theme/swatch-group.ts
new file mode 100644
index 00000000000..9118c073b45
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/swatch-group.ts
@@ -0,0 +1,16 @@
+import { html } from "../../support/formatting";
+
+export const swatchGroupTokens = {
+  calciteSwatchGroupSpace: "",
+};
+
+export const swatchGroup = html`
+  <calcite-swatch-group label="demo-group-label" selection-mode="single-persist" id="single-persist-programmatic">
+    <calcite-swatch color="#aabbcc" label="example" value="calcite swatch"></calcite-swatch>
+    <calcite-swatch color="#ddeeff" selected label="example" value="calcite swatch"></calcite-swatch>
+    <calcite-swatch color="#112233" label="example" value="calcite swatch"></calcite-swatch>
+    <calcite-swatch color="#445566" label="example" value="calcite swatch"></calcite-swatch>
+    <calcite-swatch color="#425262" disabled label="example" value="calcite swatch"></calcite-swatch>
+    <calcite-swatch color="" label="example" value="calcite swatch"></calcite-swatch>
+  </calcite-swatch-group>
+`;
diff --git a/packages/calcite-components/src/custom-theme/swatch.ts b/packages/calcite-components/src/custom-theme/swatch.ts
new file mode 100644
index 00000000000..ffa611dcd72
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/swatch.ts
@@ -0,0 +1,7 @@
+import { html } from "../../support/formatting";
+
+export const swatchTokens = {
+  calciteSwatchCornerRadius: "",
+};
+
+export const swatch = html` <calcite-swatch color="#aabbcc" label="example" value="calcite swatch"></calcite-swatch> `;
diff --git a/packages/calcite-components/src/demos/swatch-group.html b/packages/calcite-components/src/demos/swatch-group.html
index 1d3e382206f..fdda27101f0 100644
--- a/packages/calcite-components/src/demos/swatch-group.html
+++ b/packages/calcite-components/src/demos/swatch-group.html
@@ -276,7 +276,32 @@ <h2>Swatch group selection mode examples</h2>
         <calcite-swatch-group
           label="demo-group-label"
           selection-mode="multiple"
-          style="--calcite-swatch-corner-radius: 8px"
+          style="--calcite-swatch-corner-radius: 2px"
+        >
+          <calcite-swatch label="example" value="calcite swatch"></calcite-swatch>
+          <calcite-swatch label="example" color="#ff0000" value="calcite swatch"></calcite-swatch>
+          <calcite-swatch label="example" value="calcite swatch">
+            <img src="_assets/images/pattern-2.png" slot="image" />
+          </calcite-swatch>
+          <calcite-swatch label="example" color="rgba(250,210,150,0.2)" value="calcite swatch">
+            <img src="_assets/images/pattern-2.png" slot="image" />
+          </calcite-swatch>
+          <calcite-swatch label="example" value="calcite swatch">
+            <img src="_assets/images/hatch-3.png" slot="image" />
+          </calcite-swatch>
+          <calcite-swatch label="example" color="rgba(25,25,25,0.1)" value="calcite swatch"></calcite-swatch>
+          <calcite-swatch label="example" disabled color="#ddd" value="calcite swatch">
+            <img src="_assets/images/hatch-3.png" slot="image" />
+          </calcite-swatch>
+          <calcite-swatch label="example" disabled color="#ff00ee" value="calcite swatch"> </calcite-swatch>
+        </calcite-swatch-group>
+      </div>
+      <div class="parent">
+        <div class="child">Themed</div>
+        <calcite-swatch-group
+          label="demo-group-label"
+          selection-mode="multiple"
+          style="--calcite-swatch-corner-radius: 9999px"
         >
           <calcite-swatch label="example" value="calcite swatch"></calcite-swatch>
           <calcite-swatch label="example" color="#ff0000" value="calcite swatch"></calcite-swatch>