diff --git a/src/components/date-picker/themes/dark/_themes.scss b/src/components/date-picker/themes/dark/_themes.scss
index 169a1b88a..6ce6241d9 100644
--- a/src/components/date-picker/themes/dark/_themes.scss
+++ b/src/components/date-picker/themes/dark/_themes.scss
@@ -4,6 +4,10 @@
 @use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as input-theme;
 
 $material: map.merge(digest-schema($dark-material-calendar), digest-schema(input-theme.$dark-material-input-group));
+$material-calendar-border-color: map.get(digest-schema($dark-material-calendar), 'border-color');
 $bootstrap: map.merge(digest-schema($dark-bootstrap-calendar), digest-schema(input-theme.$dark-bootstrap-input-group));
+$bootstrap-calendar-border-color: map.get(digest-schema($dark-bootstrap-calendar), 'border-color');
 $fluent: map.merge(digest-schema($dark-fluent-calendar), digest-schema(input-theme.$dark-fluent-input-group));
+$fluent-calendar-border-color: map.get(digest-schema($dark-fluent-calendar), 'border-color');
 $indigo: map.merge(digest-schema($dark-indigo-calendar), digest-schema(input-theme.$dark-indigo-input-group));
+$indigo-calendar-border-color: map.get(digest-schema($dark-indigo-calendar), 'border-color');
diff --git a/src/components/date-picker/themes/dark/date-picker.bootstrap.scss b/src/components/date-picker/themes/dark/date-picker.bootstrap.scss
index e6611c2e4..b521bf452 100644
--- a/src/components/date-picker/themes/dark/date-picker.bootstrap.scss
+++ b/src/components/date-picker/themes/dark/date-picker.bootstrap.scss
@@ -4,4 +4,6 @@
 
 :host {
     @include css-vars-from-theme(diff(light.$base, $bootstrap), 'ig-datepicker');
+
+    --calendar-border-color: #{$bootstrap-calendar-border-color};
 }
diff --git a/src/components/date-picker/themes/dark/date-picker.fluent.scss b/src/components/date-picker/themes/dark/date-picker.fluent.scss
index 6ec00e96a..9573e0cf9 100644
--- a/src/components/date-picker/themes/dark/date-picker.fluent.scss
+++ b/src/components/date-picker/themes/dark/date-picker.fluent.scss
@@ -4,4 +4,6 @@
 
 :host {
     @include css-vars-from-theme(diff(light.$base, $fluent), 'ig-datepicker');
+
+    --calendar-border-color: #{$fluent-calendar-border-color};
 }
diff --git a/src/components/date-picker/themes/dark/date-picker.indigo.scss b/src/components/date-picker/themes/dark/date-picker.indigo.scss
index cea5626d0..5464c7279 100644
--- a/src/components/date-picker/themes/dark/date-picker.indigo.scss
+++ b/src/components/date-picker/themes/dark/date-picker.indigo.scss
@@ -4,4 +4,10 @@
 
 :host {
     @include css-vars-from-theme(diff(light.$base, $indigo), 'ig-datepicker');
+
+    --calendar-border-color: #{$indigo-calendar-border-color};
+
+    igc-dialog[open]::part(base) {
+        box-shadow: var(--ig-elevation-7);
+    }
 }
diff --git a/src/components/date-picker/themes/dark/date-picker.material.scss b/src/components/date-picker/themes/dark/date-picker.material.scss
index 599d159c8..3aa1130a5 100644
--- a/src/components/date-picker/themes/dark/date-picker.material.scss
+++ b/src/components/date-picker/themes/dark/date-picker.material.scss
@@ -4,4 +4,6 @@
 
 :host {
     @include css-vars-from-theme(diff(light.$base, $material), 'ig-datepicker');
+
+    --calendar-border-color: #{$material-calendar-border-color};
 }
diff --git a/src/components/date-picker/themes/light/_themes.scss b/src/components/date-picker/themes/light/_themes.scss
index f5d320ff2..a9b00e2b1 100644
--- a/src/components/date-picker/themes/light/_themes.scss
+++ b/src/components/date-picker/themes/light/_themes.scss
@@ -5,6 +5,10 @@
 
 $base: digest-schema($light-calendar);
 $material: map.merge(digest-schema($material-calendar), digest-schema(input-theme.$material-input-group));
+$material-calendar-border-color: map.get(digest-schema($material-calendar), 'border-color');
 $bootstrap: map.merge(digest-schema($bootstrap-calendar), digest-schema(input-theme.$bootstrap-input-group));
+$bootstrap-calendar-border-color: map.get(digest-schema($bootstrap-calendar), 'border-color');
 $fluent: map.merge(digest-schema($fluent-calendar), digest-schema(input-theme.$fluent-input-group));
+$fluent-calendar-border-color: map.get(digest-schema($fluent-calendar), 'border-color');
 $indigo: map.merge(digest-schema($indigo-calendar), digest-schema(input-theme.$indigo-input-group));
+$indigo-calendar-border-color: map.get(digest-schema($indigo-calendar), 'border-color');
diff --git a/src/components/date-picker/themes/shared/date-picker.bootstrap.scss b/src/components/date-picker/themes/shared/date-picker.bootstrap.scss
index d4323edc0..2a737b2a5 100644
--- a/src/components/date-picker/themes/shared/date-picker.bootstrap.scss
+++ b/src/components/date-picker/themes/shared/date-picker.bootstrap.scss
@@ -4,20 +4,14 @@
 $theme: $bootstrap;
 
 :host {
+    --calendar-border-color: #{$bootstrap-calendar-border-color};
+
     igc-dialog {
         igc-calendar {
             border: none;
         }
     }
 
-    igc-dialog::part(base) {
-        border: rem(1px) solid var-get($theme, 'border-color');
-    }
-
-    igc-focus-trap {
-        box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color');
-    }
-
     [part~='label'] {
         @include type-style('body-1');
 
diff --git a/src/components/date-picker/themes/shared/date-picker.common.scss b/src/components/date-picker/themes/shared/date-picker.common.scss
index b80ea38d6..66f1adf79 100644
--- a/src/components/date-picker/themes/shared/date-picker.common.scss
+++ b/src/components/date-picker/themes/shared/date-picker.common.scss
@@ -7,6 +7,7 @@ $input-theme: input-theme.$material;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+    --calendar-border-color: #{$material-calendar-border-color};
 
     igc-dialog {
         box-shadow: none;
@@ -23,6 +24,7 @@ $input-theme: input-theme.$material;
 
     igc-dialog[open]::part(base) {
         box-shadow: var(--ig-elevation-24);
+        border: rem(1px) solid var(--calendar-border-color);
     }
 
     igc-dialog::part(content),
@@ -42,6 +44,7 @@ $input-theme: input-theme.$material;
 
         border-radius: var-get($theme, 'border-radius');
         background: var-get($theme, 'content-background');
+        box-shadow: 0 0 0 rem(1px) var(--calendar-border-color);
     }
 
     igc-popover::part(container) {
diff --git a/src/components/date-picker/themes/shared/date-picker.fluent.scss b/src/components/date-picker/themes/shared/date-picker.fluent.scss
index 50d8c50fb..9ebe358e0 100644
--- a/src/components/date-picker/themes/shared/date-picker.fluent.scss
+++ b/src/components/date-picker/themes/shared/date-picker.fluent.scss
@@ -4,6 +4,8 @@
 $theme: $fluent;
 
 :host {
+    --calendar-border-color: #{$fluent-calendar-border-color};
+
     igc-dialog[open]::part(base) {
         border-radius: 0;
     }
diff --git a/src/components/date-picker/themes/shared/date-picker.indigo.scss b/src/components/date-picker/themes/shared/date-picker.indigo.scss
index c78c292a0..d4ac96e82 100644
--- a/src/components/date-picker/themes/shared/date-picker.indigo.scss
+++ b/src/components/date-picker/themes/shared/date-picker.indigo.scss
@@ -7,14 +7,11 @@ $theme: $indigo;
 $input-theme: input-theme.$indigo;
 
 :host {
+    --calendar-border-color: #{$indigo-calendar-border-color};
+
     igc-dialog[open]::part(base) {
         border-radius: rem(6px);
         box-shadow: var(--ig-elevation-5);
-        border: rem(1px) solid var-get($theme, 'border-color');
-    }
-
-    igc-focus-trap {
-        box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color');
     }
 
     [part~='label'] {