diff --git a/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/fabstyles.cs b/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/fabstyles.cs
new file mode 100644
index 0000000000..598dfccffe
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/fabstyles.cs
@@ -0,0 +1,4 @@
+public ActionResult FabStyles()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/razor b/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/razor
new file mode 100644
index 0000000000..8a0706622d
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/razor
@@ -0,0 +1,11 @@
+@using Syncfusion.EJ2.Buttons
+
+<div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
+    @Html.EJS().Fab("fab").Target("#target").IconCss("e-icons e-people").Content("Contact").CssClass("custom-css").Render()
+</div>
+<style>
+    .custom-css.e-fab.e-btn {
+        border-color: darkgrey;
+        border-width: 4px;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/tagHelper b/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/tagHelper
new file mode 100644
index 0000000000..dac66fd79b
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/tagHelper
@@ -0,0 +1,11 @@
+@using Syncfusion.EJ2.Buttons
+
+<div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
+    <ejs-fab id="fab" target="#target" cssClass="custom-css" iconCss="e-icons e-people" content="Contact"></ejs-fab>
+</div>
+<style>
+    .custom-css.e-fab.e-btn {
+        border-color: darkgrey;
+        border-width: 4px;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/floating-action-button/EJ2_ASP.MVC/styles.md b/ej2-asp-core-mvc/floating-action-button/EJ2_ASP.MVC/styles.md
index 96fd3c00a5..a511b40b5e 100644
--- a/ej2-asp-core-mvc/floating-action-button/EJ2_ASP.MVC/styles.md
+++ b/ej2-asp-core-mvc/floating-action-button/EJ2_ASP.MVC/styles.md
@@ -70,4 +70,23 @@ By using [CssClass](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.
 
 {% endif %}
 
-![Asp.Net MVC Floating Action Button control with Hover](images/onhover.png)
\ No newline at end of file
+![Asp.Net MVC Floating Action Button control with Hover](images/onhover.png)
+
+## Outline customization
+
+By using the [CssClass](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.Fab.html#Syncfusion_EJ2_Buttons_Fab_CssClass) property, you can customize the outline color of the Floating Action Button.
+
+{% if page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/floating-action-button/styles/custom-outline/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Fabstyles.cs" %}
+{% include code-snippet/floating-action-button/styles/custom-outline/fabstyles.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+![Asp.Net MVC Floating Action Button control with Outline](images/FabOutline.png)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/floating-action-button/EJ2_ASP.NETCORE/styles.md b/ej2-asp-core-mvc/floating-action-button/EJ2_ASP.NETCORE/styles.md
index 8e33b498b1..43e73e66da 100644
--- a/ej2-asp-core-mvc/floating-action-button/EJ2_ASP.NETCORE/styles.md
+++ b/ej2-asp-core-mvc/floating-action-button/EJ2_ASP.NETCORE/styles.md
@@ -66,3 +66,19 @@ By using [CssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2
 {% endif %}
 
 ![Asp.Net Core Floating Action Button control with Hover](images/onhover.png)
+
+## Outline customization
+
+By using the [CssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Buttons.Fab.html#Syncfusion_EJ2_Buttons_Fab_CssClass) property, you can customize the outline color of the Floating Action Button.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/floating-action-button/styles/custom-outline/tagHelper %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+![Asp.Net Core Floating Action Button control with Outline](images/FabOutline.png)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/floating-action-button/images/FabOutline.png b/ej2-asp-core-mvc/floating-action-button/images/FabOutline.png
new file mode 100644
index 0000000000..b2bd15457b
Binary files /dev/null and b/ej2-asp-core-mvc/floating-action-button/images/FabOutline.png differ