diff --git a/src/Components/Blazor/Templates/src/content/BlazorHosted-CSharp/BlazorHosted-CSharp.Client/_ViewImports.cshtml b/src/Components/Blazor/Templates/src/content/BlazorHosted-CSharp/BlazorHosted-CSharp.Client/_ViewImports.cshtml
index 6c4eae0fe4..087fc85bad 100644
--- a/src/Components/Blazor/Templates/src/content/BlazorHosted-CSharp/BlazorHosted-CSharp.Client/_ViewImports.cshtml
+++ b/src/Components/Blazor/Templates/src/content/BlazorHosted-CSharp/BlazorHosted-CSharp.Client/_ViewImports.cshtml
@@ -1,4 +1,5 @@
 @using System.Net.Http
+@using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.AspNetCore.Components.Layouts
 @using Microsoft.AspNetCore.Components.Routing
 @using Microsoft.JSInterop
diff --git a/src/Components/Blazor/Templates/src/content/BlazorHosted-CSharp/BlazorHosted-CSharp.Client/wwwroot/css/site.css b/src/Components/Blazor/Templates/src/content/BlazorHosted-CSharp/BlazorHosted-CSharp.Client/wwwroot/css/site.css
index 7338534ed3..fa2c7f19b7 100644
--- a/src/Components/Blazor/Templates/src/content/BlazorHosted-CSharp/BlazorHosted-CSharp.Client/wwwroot/css/site.css
+++ b/src/Components/Blazor/Templates/src/content/BlazorHosted-CSharp/BlazorHosted-CSharp.Client/wwwroot/css/site.css
@@ -84,6 +84,18 @@ app {
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
+}
+
+.invalid {
+    outline: 1px solid red;
+}
+
+.validation-message {
+    color: red;
+}
+
 @media (max-width: 767.98px) {
     .main .top-row {
         display: none;
diff --git a/src/Components/Blazor/Templates/src/content/BlazorStandalone-CSharp/_ViewImports.cshtml b/src/Components/Blazor/Templates/src/content/BlazorStandalone-CSharp/_ViewImports.cshtml
index 491a46a96c..c01cdd4ec4 100644
--- a/src/Components/Blazor/Templates/src/content/BlazorStandalone-CSharp/_ViewImports.cshtml
+++ b/src/Components/Blazor/Templates/src/content/BlazorStandalone-CSharp/_ViewImports.cshtml
@@ -1,4 +1,5 @@
 @using System.Net.Http
+@using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.AspNetCore.Components.Layouts
 @using Microsoft.AspNetCore.Components.Routing
 @using Microsoft.JSInterop
diff --git a/src/Components/Blazor/Templates/src/content/BlazorStandalone-CSharp/wwwroot/css/site.css b/src/Components/Blazor/Templates/src/content/BlazorStandalone-CSharp/wwwroot/css/site.css
index 7338534ed3..fa2c7f19b7 100644
--- a/src/Components/Blazor/Templates/src/content/BlazorStandalone-CSharp/wwwroot/css/site.css
+++ b/src/Components/Blazor/Templates/src/content/BlazorStandalone-CSharp/wwwroot/css/site.css
@@ -84,6 +84,18 @@ app {
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
+}
+
+.invalid {
+    outline: 1px solid red;
+}
+
+.validation-message {
+    color: red;
+}
+
 @media (max-width: 767.98px) {
     .main .top-row {
         display: none;
diff --git a/src/Components/Blazor/testassets/StandaloneApp/wwwroot/css/site.css b/src/Components/Blazor/testassets/StandaloneApp/wwwroot/css/site.css
index 7338534ed3..fa2c7f19b7 100644
--- a/src/Components/Blazor/testassets/StandaloneApp/wwwroot/css/site.css
+++ b/src/Components/Blazor/testassets/StandaloneApp/wwwroot/css/site.css
@@ -84,6 +84,18 @@ app {
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
+}
+
+.invalid {
+    outline: 1px solid red;
+}
+
+.validation-message {
+    color: red;
+}
+
 @media (max-width: 767.98px) {
     .main .top-row {
         display: none;
diff --git a/src/Components/test/testassets/BasicTestApp/wwwroot/style.css b/src/Components/test/testassets/BasicTestApp/wwwroot/style.css
index 740eb993c6..8bb7630162 100644
--- a/src/Components/test/testassets/BasicTestApp/wwwroot/style.css
+++ b/src/Components/test/testassets/BasicTestApp/wwwroot/style.css
@@ -1,9 +1,9 @@
-.modified.valid {
-    box-shadow: 0px 0px 0px 2px rgb(78, 203, 37);
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
 }
 
 .invalid {
-    box-shadow: 0px 0px 0px 2px rgb(255, 0, 0);
+    outline: 1px solid red;
 }
 
 .validation-message {
diff --git a/src/Components/test/testassets/ComponentsApp.Server/wwwroot/css/site.css b/src/Components/test/testassets/ComponentsApp.Server/wwwroot/css/site.css
index 7338534ed3..fa2c7f19b7 100644
--- a/src/Components/test/testassets/ComponentsApp.Server/wwwroot/css/site.css
+++ b/src/Components/test/testassets/ComponentsApp.Server/wwwroot/css/site.css
@@ -84,6 +84,18 @@ app {
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
+}
+
+.invalid {
+    outline: 1px solid red;
+}
+
+.validation-message {
+    color: red;
+}
+
 @media (max-width: 767.98px) {
     .main .top-row {
         display: none;
diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/RazorComponentsWeb-CSharp/Components/_ViewImports.cshtml b/src/ProjectTemplates/Web.ProjectTemplates/content/RazorComponentsWeb-CSharp/Components/_ViewImports.cshtml
index 28fb28776b..13358155d4 100644
--- a/src/ProjectTemplates/Web.ProjectTemplates/content/RazorComponentsWeb-CSharp/Components/_ViewImports.cshtml
+++ b/src/ProjectTemplates/Web.ProjectTemplates/content/RazorComponentsWeb-CSharp/Components/_ViewImports.cshtml
@@ -1,4 +1,5 @@
 @using System.Net.Http
+@using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.AspNetCore.Components.Layouts
 @using Microsoft.AspNetCore.Components.Routing
 @using Microsoft.JSInterop
diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/RazorComponentsWeb-CSharp/wwwroot/css/site.css b/src/ProjectTemplates/Web.ProjectTemplates/content/RazorComponentsWeb-CSharp/wwwroot/css/site.css
index 7338534ed3..fa2c7f19b7 100644
--- a/src/ProjectTemplates/Web.ProjectTemplates/content/RazorComponentsWeb-CSharp/wwwroot/css/site.css
+++ b/src/ProjectTemplates/Web.ProjectTemplates/content/RazorComponentsWeb-CSharp/wwwroot/css/site.css
@@ -84,6 +84,18 @@ app {
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
+}
+
+.invalid {
+    outline: 1px solid red;
+}
+
+.validation-message {
+    color: red;
+}
+
 @media (max-width: 767.98px) {
     .main .top-row {
         display: none;