diff --git a/css/css-borders/border-shape/border-shape-ignore-radius-computed.html b/css/css-borders/border-shape/border-shape-ignore-radius-computed.html
new file mode 100644
index 00000000000000..2e8e2c8589bbd9
--- /dev/null
+++ b/css/css-borders/border-shape/border-shape-ignore-radius-computed.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>CSS Border Shape: border-radius is ignored in computed style when border-shape is specified</title>
+<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape-radius-interaction">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#test {
+    border-shape: inset(0px) inset(0px round 20px);
+    border-radius: 999px;
+    corner-shape: bevel;
+}
+</style>
+<div id="test"></div>
+<script>
+test(() => {
+    const style = getComputedStyle(document.getElementById('test'));
+    assert_not_equals(style.borderShape, 'none', 'borderShape should be parsed successfully');
+    assert_equals(style.borderTopLeftRadius, '999px');
+    assert_equals(style.borderTopRightRadius, '999px');
+    assert_equals(style.borderBottomRightRadius, '999px');
+    assert_equals(style.borderBottomLeftRadius, '999px');
+    assert_equals(style.cornerTopLeftShape, 'bevel');
+    assert_equals(style.cornerTopRightShape, 'bevel');
+    assert_equals(style.cornerBottomRightShape, 'bevel');
+    assert_equals(style.cornerBottomLeftShape, 'bevel');
+}, "border-radius and corner-shape are NOT reset in computed style when border-shape is specified");
+</script>
diff --git a/css/css-borders/border-shape/border-shape-ignore-radius-ref.html b/css/css-borders/border-shape/border-shape-ignore-radius-ref.html
new file mode 100644
index 00000000000000..f5e1a93db17b8b
--- /dev/null
+++ b/css/css-borders/border-shape/border-shape-ignore-radius-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<style>
+.test {
+    width: 200px;
+    height: 200px;
+    box-sizing: border-box;
+    margin: 50px auto;
+    outline: 1px solid black;
+    border: 10px solid transparent;
+    background: linear-gradient(green, green);
+    /* Same border-shape as the test, but with border-radius: 0.
+       If they match, then border-radius on the test was successfully ignored. */
+    border-shape: inset(0px) inset(10px round 20px);
+    border-radius: 0px;
+}
+</style>
+<div class="test"></div>
diff --git a/css/css-borders/border-shape/border-shape-ignore-radius.html b/css/css-borders/border-shape/border-shape-ignore-radius.html
new file mode 100644
index 00000000000000..5f4458871baaa5
--- /dev/null
+++ b/css/css-borders/border-shape/border-shape-ignore-radius.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>CSS Border Shape: border-radius is ignored when border-shape is specified</title>
+<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape-radius-interaction">
+<link rel="match" href="border-shape-ignore-radius-ref.html">
+<style>
+.test {
+    width: 200px;
+    height: 200px;
+    box-sizing: border-box;
+    margin: 50px auto;
+    outline: 1px solid black;
+    border: 10px solid transparent;
+    background: linear-gradient(green, green);
+    /* Outer shape is sharp border-box (inset 0).
+       Inner shape is rounded, inset by 10px (matching the border width). */
+    border-shape: inset(0px) inset(10px round 20px);
+    border-radius: 999px;
+}
+</style>
+<div class="test"></div>
