[border-shape] Disable border-radius and corner-shape with border-shape

danielsakhapov · chromium-wpt-export-bot · commit 2553e3c632c2 · 2026-04-14T07:27:11.000-07:00
https://drafts.csswg.org/css-borders-4/#border-shape-radius-interaction The border-shape property is not compatible with border-radius and corner-shape, so disable it explicitly instead of doing so in layout/ paint. Fixed: 501626908 Change-Id: I34eb29d8de2c8c4049e0b7e315b5cc0e640ff67c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7748831 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org> Cr-Commit-Position: refs/heads/main@{#1614410}
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
@@ -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
@@ -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
@@ -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>
