diff --git a/projects/angular/src/layout/_card.clarity.scss b/projects/angular/src/layout/_card.clarity.scss
index e73d3b776e..b151d88939 100644
--- a/projects/angular/src/layout/_card.clarity.scss
+++ b/projects/angular/src/layout/_card.clarity.scss
@@ -22,10 +22,10 @@
 
   %clickable-card-transition {
     box-shadow: card-variables.$clr-card-clickable-box-shadow;
-    border: tokens.$cds-alias-object-border-width-200 solid card-variables.$clr-card-clickable-border-color;
+    border: tokens.$cds-alias-object-border-width-100 solid card-variables.$clr-card-clickable-border-color;
     cursor: pointer;
     text-decoration: none;
-    transition: border 0.2s ease, transform 0.2s ease;
+    transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
   }
 
   %card-space-between {
diff --git a/projects/angular/src/layout/_properties.card.scss b/projects/angular/src/layout/_properties.card.scss
index 1c408a09ea..db28c96da1 100644
--- a/projects/angular/src/layout/_properties.card.scss
+++ b/projects/angular/src/layout/_properties.card.scss
@@ -20,7 +20,7 @@
     --clr-card-border-color: #{tokens.$cds-alias-object-border-color};
     --clr-card-box-shadow: #{tokens.$cds-alias-object-shadow-300};
     --clr-card-clickable-border-color: #{tokens.$cds-alias-object-interaction-background-highlight};
-    --clr-card-clickable-box-shadow: #{tokens.$cds-alias-object-shadow-300};
+    --clr-card-clickable-box-shadow: 0 0 0 #{tokens.$cds-global-space-1} var(--clr-card-clickable-border-color);
     --clr-card-header-title-color: var(--clr-card-title-color);
     --clr-card-content-title-color: var(--clr-card-title-color);
     --clr-card-text-color: #{tokens.$cds-alias-typography-color-400};