diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Borders.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Borders.cshtml
index 9b683f8924..76c14746af 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Borders.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Borders.cshtml
@@ -10,43 +10,206 @@
     </abp-style-bundle>
 }
 
+@section scripts {
+    <abp-script-bundle>
+        @*<abp-script src="/libs/highlight.js/lib/highlight.js" />
+            <abp-script src="/Pages/Components/highlightCode.js" />*@
+    </abp-script-bundle>
+}
+
+<style>
+    .border-span span {
+        display: inline-block;
+        width: 5rem;
+        height: 5rem;
+        margin: .25rem;
+        background-color: #f5f5f5;
+    }
+</style>
+
+<link rel="stylesheet"
+      href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
+<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
+<script>hljs.initHighlightingOnLoad();</script>
+
 <h2>Borders</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/border/" target="_blank"> Bootstrap Border</a>.</p>
 
-<h4># Borders Examples</h4>
+<h4>Border</h4>
+
+<h5>Additive</h5>
 
 <div class="demo-with-code">
-    <div class="demo-area">
-        <span abp-border="Default">aaa</span>
-        <span abp-border="Top">bbb</span>
-        <span abp-border="Right">ccc</span>
-        <span abp-border="Left">ddd</span>
-        <span abp-border="Bottom">eee</span>
-        <span abp-border="Top_0">fff</span>
-        <span abp-border="Right_0">ggg</span>
-        <span abp-border="Left_0">hhh</span>
-        <span abp-border="Bottom_0">iii</span>
-        <span abp-border="Top_Primary">jjj</span>
-        <span abp-border="Warning_0">kkk</span>
-        <span abp-border="Bottom_Primary_0">lll</span>
-        <span abp-border="Left_Danger">mmm</span>
+    <div class="demo-area border-span">
+        <span abp-border="Default"></span>
+        <span abp-border="Top"></span>
+        <span abp-border="Right"></span>
+        <span abp-border="Bottom"></span>
+        <span abp-border="Left"></span>
     </div>
     <div class="code-area">
-        <pre>
-&lt;span abp-border=&quot;Default&quot;&gt;aaa&lt;/span&gt;
-&lt;span abp-border=&quot;Top&quot;&gt;bbb&lt;/span&gt;
-&lt;span abp-border=&quot;Right&quot;&gt;ccc&lt;/span&gt;
-&lt;span abp-border=&quot;Left&quot;&gt;ddd&lt;/span&gt;
-&lt;span abp-border=&quot;Bottom&quot;&gt;eee&lt;/span&gt;
-&lt;span abp-border=&quot;Top_0&quot;&gt;fff&lt;/span&gt;
-&lt;span abp-border=&quot;Right_0&quot;&gt;ggg&lt;/span&gt;
-&lt;span abp-border=&quot;Left_0&quot;&gt;hhh&lt;/span&gt;
-&lt;span abp-border=&quot;Bottom_0&quot;&gt;iii&lt;/span&gt;
-&lt;span abp-border=&quot;Top_Primary&quot;&gt;jjj&lt;/span&gt;
-&lt;span abp-border=&quot;Warning_0&quot;&gt;kkk&lt;/span&gt;
-&lt;span abp-border=&quot;Bottom_Primary_0&quot;&gt;lll&lt;/span&gt;
-&lt;span abp-border=&quot;Left_Danger&quot;&gt;mmm&lt;/span&gt;
-</pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;span abp-border=&quot;Default&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Top&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Right&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Bottom&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Left&quot;&gt;&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;span class=&quot;border&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border-top&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border-right&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border-bottom&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border-left&quot;&gt;&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
+
+<h5>Subtractive</h5>
+
+<div class="demo-with-code">
+    <div class="demo-area border-span">
+        <span abp-border="_0"></span>
+        <span abp-border="Top_0"></span>
+        <span abp-border="Right_0"></span>
+        <span abp-border="Bottom_0"></span>
+        <span abp-border="Left_0"></span>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;span abp-border=&quot;_0&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Top_0&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Right_0&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Bottom_0&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Left_0&quot;&gt;&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;span class=&quot;borde-0&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border-top-0&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border-right-0&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border-bottom-0&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border-left-0&quot;&gt;&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Border color</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area border-span">
+        <span abp-border="Primary"></span>
+        <span abp-border="Secondary"></span>
+        <span abp-border="Success"></span>
+        <span abp-border="Danger"></span>
+        <span abp-border="Info"></span>
+        <span abp-border="Light"></span>
+        <span abp-border="Dark"></span>
+        <span abp-border="White" ></span>
+        <br/>
+        <span abp-border="Left_Primary"></span>
+        <span abp-border="Top_Secondary"></span>
+        <span abp-border="Right_Success"></span>
+        <span abp-border="Bottom_Danger"></span>
+        <span abp-border="Bottom_Warning"></span>
+        <span abp-border="Left_Info"></span>
+        <span abp-border="Top_Light"></span>
+        <span abp-border="Right_Dark"></span>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;span abp-border=&quot;Primary&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Secondary&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Success&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Danger&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Info&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Light&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Dark&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;White&quot;&gt;&lt;/span&gt;
+&lt;br/&gt;
+&lt;span abp-border=&quot;Left_Primary&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Top_Secondary&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Right_Success&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Bottom_Danger&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;bottom_Warning&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Left_Info&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Top_Light&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Right_Dark&quot;&gt;&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;span class=&quot;border border-primary&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-secondary&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-success&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-danger&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-warning&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-info&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-light&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-dark&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-white&quot;&gt;&lt;/span&gt;
+&lt;br/&gt;
+&lt;span class=&quot;border border-left border-primary&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-top border-secondary&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-right border-success&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-bottom border-danger&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-bottom border-warning&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-left border-info&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-top border-light&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-right border-dark&quot;&gt;&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Border-radius</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area border-span">
+        <span abp-border="Primary" abp-rounded="Default"></span>
+        <span abp-border="Primary" abp-rounded="_0"></span>
+        <span abp-border="Primary" abp-rounded="Top"></span>
+        <span abp-border="Primary" abp-rounded="Left"></span>
+        <span abp-border="Primary" abp-rounded="Bottom"></span>
+        <span abp-border="Primary" abp-rounded="Right"></span>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Default&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;_0&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Top&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Left&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Bottom&quot;&gt;&lt;/span&gt;
+&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Right&quot;&gt;&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;span class=&quot;border border-primary rounded&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-primary rounded-0&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-primary rounded-top&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-primary rounded-left&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-primary rounded-bottom&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;border border-primary rounded-right&quot;&gt;&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
\ No newline at end of file