diff --git a/static/styles/compose.css b/static/styles/compose.css
index 6ce26ea36a..a86071562b 100644
--- a/static/styles/compose.css
+++ b/static/styles/compose.css
@@ -336,7 +336,7 @@ input.recipient_box {
 }
 
 #subject.recipient_box {
-    width: calc(20% + 14px);
+    width: calc(20% - -14px);
     min-width: 140px;
     max-width: 165px;
 }
diff --git a/static/styles/portico.css b/static/styles/portico.css
index 50a12aa547..e9b88b4b6d 100644
--- a/static/styles/portico.css
+++ b/static/styles/portico.css
@@ -1169,7 +1169,7 @@ input#zulipbot:checked ~ #tab-zulipbot {
 .login-form {
     margin: auto;
     /* plus input padding. */
-    width: calc(300px + 28px);
+    width: calc(300px - -28px);
     margin-bottom: 10px;
 }
 
@@ -1696,7 +1696,7 @@ input.new-organization-button {
     margin-top: -240px;
     height: auto;
     width: calc(100% - 40px);
-    max-width: calc(768px + 20px);
+    max-width: calc(768px - -20px);
 }
 
 .error_page {
diff --git a/static/styles/settings.css b/static/styles/settings.css
index 4d1224abc0..6757cf8ab0 100644
--- a/static/styles/settings.css
+++ b/static/styles/settings.css
@@ -526,7 +526,7 @@ input[type=checkbox].inline-block {
 }
 
 .add-new-filter-box button {
-    margin-left: calc(10em + 20px) !important;
+    margin-left: calc(10em - -20px) !important;
 }
 
 .grey-box .wrapper {
diff --git a/static/styles/subscriptions.css b/static/styles/subscriptions.css
index c2690a546a..2c396e80e0 100644
--- a/static/styles/subscriptions.css
+++ b/static/styles/subscriptions.css
@@ -483,7 +483,7 @@ form#add_new_subscription {
 }
 
 .subscriptions-container .right {
-    width: calc(50% + 1px);
+    width: calc(50% - -1px);
 }
 
 .subscriptions-container .right .nothing-selected {
diff --git a/tools/linter_lib/custom_check.py b/tools/linter_lib/custom_check.py
index c1592e2885..73e21a880f 100644
--- a/tools/linter_lib/custom_check.py
+++ b/tools/linter_lib/custom_check.py
@@ -461,6 +461,10 @@ def build_custom_checkers(by_lang):
                         ' to set -x|set -e'},
     ] + whitespace_rules[0:1]  # type: RuleList
     css_rules = cast(RuleList, [
+        {'pattern': 'calc\([^+]+\+[^+]+\)',
+         'description': "Avoid using calc with '+' operator. See #8403 : in CSS.",
+         'good_lines': ["width: calc(20% - -14px);"],
+         'bad_lines': ["width: calc(20% + 14px);"]},
         {'pattern': '^[^:]*:\S[^:]*;$',
          'description': "Missing whitespace after : in CSS",
          'good_lines': ["background-color: white;", "text-size: 16px;"],