diff --git a/app/assets/stylesheets/components/cards.scss b/app/assets/stylesheets/components/cards.scss
index 36e1104bb..fdbf9c232 100644
--- a/app/assets/stylesheets/components/cards.scss
+++ b/app/assets/stylesheets/components/cards.scss
@@ -1,7 +1,7 @@
 @import '../config/import';
 
 .crayons-card {
-  border-radius: var(--radius);
+  border-radius: var(--radius-auto);
   background: var(--card-bg);
   color: var(--card-color);
   box-shadow: 0 0 0 1px var(--card-border);
@@ -23,13 +23,11 @@
     margin-bottom: var(--su-4);
     grid-gap: var(--su-4);
     display: grid;
-    border-radius: 0;
 
     @media (min-width: $breakpoint-m) {
       padding: var(--su-6);
       margin-bottom: var(--su-6);
       grid-gap: var(--su-6);
-      border-radius: var(--radius);
     }
   }
 
diff --git a/app/assets/stylesheets/components/modals.scss b/app/assets/stylesheets/components/modals.scss
index 7ccd3ad20..a0dc4912a 100644
--- a/app/assets/stylesheets/components/modals.scss
+++ b/app/assets/stylesheets/components/modals.scss
@@ -61,13 +61,13 @@
     height: 100%;
     overflow: hidden;
     pointer-events: auto;
+    border-radius: var(--radius-large-auto);
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
       0 10px 10px -5px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--base-a10);
 
     @media (min-width: $breakpoint-s) {
       background: var(--card-bg);
       color: var(--card-color);
-      border-radius: var(--radius-large);
       max-height: calc(100% - var(--su-6));
       height: auto;
       width: 90%;
diff --git a/app/assets/stylesheets/components/notices.scss b/app/assets/stylesheets/components/notices.scss
index 5577f4a5d..c472fe828 100644
--- a/app/assets/stylesheets/components/notices.scss
+++ b/app/assets/stylesheets/components/notices.scss
@@ -4,7 +4,7 @@
   padding: var(--su-4);
   background: var(--card-bg);
   color: var(--card-color);
-  border-radius: var(--radius);
+  border-radius: var(--radius-auto);
 
   &--danger {
     background: var(--accent-danger-a10);
diff --git a/app/assets/stylesheets/components/stories.scss b/app/assets/stylesheets/components/stories.scss
index b858a0873..189442b1c 100644
--- a/app/assets/stylesheets/components/stories.scss
+++ b/app/assets/stylesheets/components/stories.scss
@@ -14,6 +14,7 @@
   box-shadow: 0 0 0 1px var(--card-border);
   margin: 0 0 var(--su-2);
   position: relative;
+  border-radius: var(--radius-auto);
 
   &:focus-within {
     outline: none;
@@ -21,10 +22,6 @@
     box-shadow: 0 0 0 2px var(--card-border);
   }
 
-  @media (min-width: $breakpoint-m) {
-    border-radius: var(--radius);
-  }
-
   --story-padding: var(--su-4) var(--su-4) var(--su-3);
   --title-font-size: var(--fs-xl);
 
diff --git a/app/assets/stylesheets/config/_variables.scss b/app/assets/stylesheets/config/_variables.scss
index 63ba1fcd4..48bdab50a 100644
--- a/app/assets/stylesheets/config/_variables.scss
+++ b/app/assets/stylesheets/config/_variables.scss
@@ -35,6 +35,14 @@
 
   --radius: 0.375rem;
   --radius-large: 0.75rem;
+  // 1. this is a trick for conditional border-radius: https://ishadeed.com/article/conditional-border-radius/
+  // 2. intentionally using uppercase Max and Min because SCSS have issues otherwise...
+  --radius-auto: Max(0px, Min(var(--radius), calc((100vw - 4px - 100%) * 9999))) /
+    var(--radius);
+  --radius-large-auto: Max(
+      0px,
+      Min(var(--radius-large), calc((100vw - 4px - 100%) * 9999))
+    ) / var(--radius-large);
 
   ////////////////////////////////////////////////////////////////////////////////////
   // Transitions /////////////////////////////////////////////////////////////////////
diff --git a/app/assets/stylesheets/views.scss b/app/assets/stylesheets/views.scss
index d6f0f6c7f..4d8d62231 100644
--- a/app/assets/stylesheets/views.scss
+++ b/app/assets/stylesheets/views.scss
@@ -12,5 +12,4 @@
 @import 'views/signin';
 @import 'views/signup-modal';
 @import 'views/sponsors';
-@import 'views/tag';
 @import 'views/podcasts';
diff --git a/app/assets/stylesheets/views/article.scss b/app/assets/stylesheets/views/article.scss
index 89006ece4..abf42f067 100644
--- a/app/assets/stylesheets/views/article.scss
+++ b/app/assets/stylesheets/views/article.scss
@@ -20,7 +20,9 @@
       left: 0;
       right: 0;
       bottom: 0;
-      border-radius: var(--radius) var(--radius) 0 0;
+      border-radius: var(--radius-auto);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
       object-fit: cover;
       width: 100%;
       height: 100%;
diff --git a/app/assets/stylesheets/views/notifications.scss b/app/assets/stylesheets/views/notifications.scss
index f439f33fc..4a815b5b2 100644
--- a/app/assets/stylesheets/views/notifications.scss
+++ b/app/assets/stylesheets/views/notifications.scss
@@ -9,14 +9,12 @@
 
   display: flex;
   color: var(--base-80);
-  border-radius: 0;
 
   @media (min-width: $breakpoint-s) {
     --padding: var(--su-4);
   }
   @media (min-width: $breakpoint-m) {
     --padding: var(--su-5);
-    border-radius: var(--radius);
   }
 
   &--middle {
diff --git a/app/assets/stylesheets/views/profile.scss b/app/assets/stylesheets/views/profile.scss
index 1735911d4..5c3007c25 100644
--- a/app/assets/stylesheets/views/profile.scss
+++ b/app/assets/stylesheets/views/profile.scss
@@ -2,14 +2,12 @@
 
 .profile-header {
   --padding: var(--su-3);
-  border-radius: 0;
 
   @media (min-width: $breakpoint-s) {
     --padding: var(--su-4);
   }
 
   @media (min-width: $breakpoint-m) {
-    border-radius: var(--radius);
     text-align: center;
   }
 
diff --git a/app/assets/stylesheets/views/tag.scss b/app/assets/stylesheets/views/tag.scss
deleted file mode 100644
index 17b690142..000000000
--- a/app/assets/stylesheets/views/tag.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import '../config/import';
-
-.tag-header {
-  padding: var(--su-4);
-  border-radius: 0;
-
-  @media (min-width: $breakpoint-m) {
-    border-radius: var(--radius);
-  }
-
-  @media (min-width: $breakpoint-l) {
-    padding: var(--su-6);
-  }
-}
diff --git a/app/views/stories/tagged_articles/index.html.erb b/app/views/stories/tagged_articles/index.html.erb
index bc9655135..2fa5ed410 100644
--- a/app/views/stories/tagged_articles/index.html.erb
+++ b/app/views/stories/tagged_articles/index.html.erb
@@ -5,7 +5,7 @@
 <% flag = true %>
 <% cache("tag-stories-index-#{params}-#{flag}-#{@tag_model.updated_at}-#{user_signed_in?}", expires_in: expiry_minutes.minutes) do %>
   <div class="crayons-layout">
-    <header class="tag-header crayons-card branded-4" style="border-top-color: <%= Color::CompareHex.new([@tag_model.bg_color_hex || "#0000000", @tag_model.text_color_hex || "#ffffff"]).brightness(0.88) %>">
+    <header class="crayons-card branded-4 p-4 l:p-6 spec__tag-header" style="border-top-color: <%= Color::CompareHex.new([@tag_model.bg_color_hex || "#000000", @tag_model.text_color_hex || "#ffffff"]).brightness(0.88) %>">
       <div class="flex">
         <% if @tag_model.badge_id && @tag_model.badge %>
             <img src="<%= optimized_image_url(@tag_model.badge.badge_image_url, width: 64) %>" alt="" class="mr-4" style="transform: rotate(<%= -25 + (@tag_model.id.digits.first * 5) %>deg); width: 64px; height: 64px;" />
diff --git a/spec/system/articles/user_visits_articles_by_tag_spec.rb b/spec/system/articles/user_visits_articles_by_tag_spec.rb
index cc630f240..1301582e0 100644
--- a/spec/system/articles/user_visits_articles_by_tag_spec.rb
+++ b/spec/system/articles/user_visits_articles_by_tag_spec.rb
@@ -23,7 +23,7 @@ RSpec.describe "User visits articles by tag", type: :system do
       end
 
       it "shows the follow button", js: true do
-        within("header.tag-header") { expect(page).to have_button(I18n.t("core.follow")) }
+        within("header.spec__tag-header") { expect(page).to have_button(I18n.t("core.follow")) }
       end
 
       # Regression test for https://github.com/forem/forem/pull/12724
@@ -65,7 +65,7 @@ RSpec.describe "User visits articles by tag", type: :system do
     it "shows the following button", js: true do
       wait_for_javascript
 
-      within("header.tag-header") { expect(page).to have_button(I18n.t("core.following")) }
+      within("header.spec__tag-header") { expect(page).to have_button(I18n.t("core.following")) }
     end
 
     it "shows time buttons" do