diff --git a/packages/webawesome/src/components/card/card.css b/packages/webawesome/src/components/card/card.css
index e6a1c6908..eb4d62b16 100644
--- a/packages/webawesome/src/components/card/card.css
+++ b/packages/webawesome/src/components/card/card.css
@@ -22,12 +22,12 @@
   box-shadow: none;
 }
 
-:host([appearance='outlined']) {
+:host([appearance~='outlined']) {
   background-color: var(--wa-color-surface-default);
   border-color: var(--wa-color-surface-border);
 }
 
-:host([appearance='filled']) {
+:host([appearance~='filled']) {
   background-color: var(--wa-color-neutral-fill-quiet);
   border-color: transparent;
 }