diff --git a/src/theme/style-hc.css b/src/theme/style-hc.css
index 781a4f6f..30468c54 100644
--- a/src/theme/style-hc.css
+++ b/src/theme/style-hc.css
@@ -1,7 +1,8 @@
 datechooser .weeknum {
+  --border-width: 1px;
+
   color: var(--window-fg-color);
   background-color: rgb(from var(--window-fg-color) r g b / 5%);
-  border: 1px solid rgb(from currentColor r g b / 50%);
 }
 
 calendar-view.month-view {
diff --git a/src/theme/style.css b/src/theme/style.css
index 2a972fd2..22c32a90 100644
--- a/src/theme/style.css
+++ b/src/theme/style.css
@@ -91,10 +91,16 @@ datechooser navigator button {
 
 /* week numbers, with a style resembling GNOME Shell's */
 datechooser .weeknum {
+  --padding: 4px;
+
+  --_border-width: var(--border-width, 0px);
+  --_padding: calc(var(--padding) - var(--_border-width));
+
   font-size: smaller;
   font-weight: bold;
   margin: 6px;
-  padding: 4px;
+  padding: var(--_padding);
+  border: var(--_border-width) solid rgb(from currentColor r g b / 50%);
   border-radius: 5px;
   background-color: rgb(from var(--insensitive-fg-color) r g b / 10%);
   color: var(--insensitive-fg-color);