diff --git a/css/css-borders/corner-shape/corner-shape-superellipse-concave-ref.html b/css/css-borders/corner-shape/corner-shape-superellipse-concave-ref.html
new file mode 100644
index 00000000000000..6e171256c3b411
--- /dev/null
+++ b/css/css-borders/corner-shape/corner-shape-superellipse-concave-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<head>
+<title>CSS Borders and Box Decorations 4: per-corner concave 'corner-shape' superellipse values — reference</title>
+<style>
+    .target { position: relative; background: red; width: 100px; height: 100px; box-sizing: border-box;
+        clip-path: path("M 75.000 0.000 C 75.000 7.326 75.379 14.511 80.434 19.566 C 85.489 24.621 92.674 25.000 100.000 25.000 L 100.000 75.000 C 83.369 75.000 79.456 74.694 77.075 77.075 C 74.694 79.456 75.000 83.369 75.000 100.000 L 25.000 100.000 C 25.000 75.747 25.081 75.620 24.731 75.269 C 24.380 74.919 24.253 75.000 0.000 75.000 L 0.000 25.000 C 1.535 25.000 7.947 22.680 15.314 15.314 C 22.680 7.947 25.000 1.535 25.000 0.000 Z"); }
+    .clip { position: absolute; inset: 5px; overflow: hidden; }
+    .shape { position: absolute; inset: -5px; background: green; clip-path: path("M 70.000 0.000 C 70.000 8.791 70.454 17.414 76.520 23.480 C 82.586 29.546 91.209 30.000 100.000 30.000 L 100.000 70.000 C 80.043 70.000 75.347 69.633 72.490 72.490 C 69.633 75.347 70.000 80.043 70.000 100.000 L 30.000 100.000 C 30.000 70.896 30.097 70.744 29.677 70.323 C 29.256 69.903 29.104 70.000 0.000 70.000 L 1.584 29.742 C 3.314 29.742 10.536 27.129 18.832 18.832 C 27.129 10.536 29.742 3.314 29.742 1.584 Z"); }
+</style>
+</head>
+<div class=target><div class=clip><div class=shape></div></div></div>
diff --git a/css/css-borders/corner-shape/corner-shape-superellipse-concave.html b/css/css-borders/corner-shape/corner-shape-superellipse-concave.html
new file mode 100644
index 00000000000000..749a6e922827d3
--- /dev/null
+++ b/css/css-borders/corner-shape/corner-shape-superellipse-concave.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<head>
+<title>CSS Borders and Box Decorations 4: per-corner concave 'corner-shape' superellipse values</title>
+<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
+<link rel="match" href="corner-shape-superellipse-concave-ref.html">
+<meta name="fuzzy" content="maxDifference=0-70; totalPixels=0-347"/>
+<style>
+    .target {
+        background: green;
+        width: 100px;
+        height: 100px;
+        border-radius: 25px;
+        box-sizing: border-box;
+        border: 5px solid red;
+        corner-shape: superellipse(-0.5) superellipse(-1.5) superellipse(-3) superellipse(-6);
+    }
+</style>
+</head>
+<div class=target></div>
diff --git a/css/css-borders/corner-shape/corner-shape-superellipse-convex-ref.html b/css/css-borders/corner-shape/corner-shape-superellipse-convex-ref.html
new file mode 100644
index 00000000000000..e6859dad1c4bec
--- /dev/null
+++ b/css/css-borders/corner-shape/corner-shape-superellipse-convex-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<head>
+<title>CSS Borders and Box Decorations 4: per-corner convex 'corner-shape' superellipse values — reference</title>
+<style>
+    .target { position: relative; background: red; width: 100px; height: 100px; box-sizing: border-box;
+        clip-path: path("M 75.000 0.000 C 82.326 0.000 89.511 0.379 94.566 5.434 C 99.621 10.489 100.000 17.674 100.000 25.000 L 100.000 75.000 C 100.000 91.631 100.306 95.544 97.925 97.925 C 95.544 100.306 91.631 100.000 75.000 100.000 L 25.000 100.000 C 0.747 100.000 0.620 100.081 0.269 99.731 C -0.081 99.380 0.000 99.253 0.000 75.000 L 0.000 25.000 C 0.000 23.465 2.320 17.053 9.686 9.686 C 17.053 2.320 23.465 0.000 25.000 0.000 Z"); }
+    .clip { position: absolute; inset: 5px; overflow: hidden; }
+    .shape { position: absolute; inset: -5px; background: green; clip-path: path("M 74.533 4.978 C 80.537 4.978 86.426 5.288 90.569 9.431 C 94.712 13.574 95.022 19.463 95.022 25.467 L 95.022 74.533 C 95.022 88.163 95.273 91.370 93.321 93.321 C 91.370 95.273 88.163 95.022 74.533 95.022 L 25.467 95.022 C 5.590 95.022 5.486 95.088 5.199 94.801 C 4.912 94.514 4.978 94.410 4.978 74.533 L 4.675 26.773 C 4.675 25.416 6.726 19.748 13.237 13.237 C 19.748 6.726 25.416 4.675 26.773 4.675 Z"); }
+</style>
+</head>
+<div class=target><div class=clip><div class=shape></div></div></div>
diff --git a/css/css-borders/corner-shape/corner-shape-superellipse-convex.html b/css/css-borders/corner-shape/corner-shape-superellipse-convex.html
new file mode 100644
index 00000000000000..cabc234c302a76
--- /dev/null
+++ b/css/css-borders/corner-shape/corner-shape-superellipse-convex.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<head>
+<title>CSS Borders and Box Decorations 4: per-corner convex 'corner-shape' superellipse values</title>
+<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
+<link rel="match" href="corner-shape-superellipse-convex-ref.html">
+<meta name="fuzzy" content="maxDifference=0-70; totalPixels=0-271"/>
+<style>
+    .target {
+        background: green;
+        width: 100px;
+        height: 100px;
+        border-radius: 25px;
+        box-sizing: border-box;
+        border: 5px solid red;
+        corner-shape: superellipse(0.5) superellipse(1.5) superellipse(3) superellipse(6);
+    }
+</style>
+</head>
+<div class=target></div>
