diff --git a/src/components/BootstrapBlazor.Vditor/Vditor.razor.cs b/src/components/BootstrapBlazor.Vditor/Vditor.razor.cs
index 3927ddbb..372c2455 100644
--- a/src/components/BootstrapBlazor.Vditor/Vditor.razor.cs
+++ b/src/components/BootstrapBlazor.Vditor/Vditor.razor.cs
@@ -60,6 +60,8 @@ public partial class Vditor
     public Func<string, Task>? OnCtrlEnterAsync { get; set; }
 
     private string? ClassString => CssBuilder.Default("bb-vditor")
+        .AddClass(CssClass)
+        .AddClass(ValidCss)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
diff --git a/src/components/BootstrapBlazor.Vditor/Vditor.razor.js b/src/components/BootstrapBlazor.Vditor/Vditor.razor.js
index 7d22f217..8fb860dc 100644
--- a/src/components/BootstrapBlazor.Vditor/Vditor.razor.js
+++ b/src/components/BootstrapBlazor.Vditor/Vditor.razor.js
@@ -7,7 +7,7 @@ export async function init(id, invoke, options) {
         return;
     }
 
-    await addLink('./_content/BootstrapBlazor.Vditor/css/index.css');
+    await addLink('./_content/BootstrapBlazor.Vditor/css/vditor.css');
     await addScript('./_content/BootstrapBlazor.Vditor/js/vditor.js');
 
     const { options: op, value } = options;
diff --git a/src/components/BootstrapBlazor.Vditor/wwwroot/css/vditor.css b/src/components/BootstrapBlazor.Vditor/wwwroot/css/vditor.css
new file mode 100644
index 00000000..3111e745
--- /dev/null
+++ b/src/components/BootstrapBlazor.Vditor/wwwroot/css/vditor.css
@@ -0,0 +1,9 @@
+@import url('index.css');
+
+.bb-vditor.is-invalid {
+    border-color: var(--bs-danger);
+}
+
+.bb-vditor.is-valid {
+    border-color: var(--bs-success);
+}