diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index e2cd8fb11eeb0..ea3792458fa5c 100644
--- a/apps/theming/css/theming.scss
+++ b/apps/theming/css/theming.scss
@@ -82,10 +82,9 @@ $invert: luma($color-primary) > 0.6;
 			@include icon-color('checkbox-mark', 'actions', $color-white, 1, true);
 		}
 	}
-	#body-user {
-		.primary {
-			border: 1px solid transparent;
-		}
+	/* Always give primary button a border for light primary colors */
+	.primary {
+		border-color: var(--color-border) !important;
 	}
 } @else {
 	#appmenu:not(.inverted) svg {
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index fde251075a868..8b4198644da6d 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -85,14 +85,22 @@ div[contenteditable=true],
 	/* Primary action button, use sparingly */
 	&.primary {
 		background-color: var(--color-primary-element);
-		border: 1px solid var(--color-primary-text);
+		border-color: var(--color-primary-element);
 		color: var(--color-primary-text);
 		cursor: pointer;
+
+		/* Apply border to primary button if on log in page (and not in a dark container) or if in header */
+		#body-login :not(.body-login-container) &,
+		#header & {
+			border-color: var(--color-primary-text);
+		}
+
 		&:not(:disabled) {
 			&:hover,
 			&:focus,
-			&:active  {
-				background-color: var(--color-primary-element-light)
+			&:active {
+				background-color: var(--color-primary-element-light);
+				border-color: var(--color-primary-element-light);
 			}
 			&:active {
 				color: var(--color-primary-text-dark);