Base: Add some elliptical border radius HTML examples

1 files changed, 54 insertions, 0 deletions

diff --git a/Base/res/html/misc/border-radius.html b/Base/res/html/misc/border-radius.html
index 9cea43b6fc..002a1a1541 100644
--- a/Base/res/html/misc/border-radius.html
+++ b/Base/res/html/misc/border-radius.html
@@ -139,6 +139,39 @@
             border: 1px solid black;
             border-radius: 500px;
         }
+
+        .rect {
+            width: 300px;
+            height: 100px;
+            background-color: red;
+        }
+
+        .rect-1 {
+            border-radius: 50%;
+        }
+
+        .rect-2 {
+            border-radius: 50% 20% / 10% 40%;
+            width: 280px;
+            height: 215px;
+            background-color: #5b6dcd;
+        }
+
+        .rect-3 {
+            border-top-left-radius: 50%;
+        }
+
+        .rect-4 {
+            border-top-right-radius: 50%;
+        }
+
+        .rect-5 {
+            border-bottom-left-radius: 50%;
+        }
+
+        .rect-6 {
+            border-bottom-right-radius: 50%;
+        }
     </style>
 </head>
 
@@ -174,6 +207,27 @@
     <br>
     <br>
 
+    <p>These boxes have elliptical borders</p>
+    <em>All round 50%</em>
+    <div class="rect rect-1"></div>
+    <br>
+    <em>All round -- MDN example</em>
+    <div class="rect rect-2"></div>
+    <br>
+    <em>top-left 50%</em>
+    <div class="rect rect-3"></div>
+    <br>
+    <em>top-right 50%</em>
+    <div class="rect rect-4"></div>
+    <br>
+    <em>bottom-left 50%</em>
+    <div class="rect rect-5"></div>
+    <br>
+    <em>bottom-right 50%</em>
+    <div class="rect rect-6"></div>
+    <br>
+    <br>
+
     <p>The boxes are 50x50px</p>
     <em>All round 10px</em>
     <div class="box box-1"></div>