[csswg-drafts] [css-borders-4][css-shapes-1]The `round` algorithm is not continuous (#13914)

yisibl has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-borders-4][css-shapes-1]The `round` algorithm is not continuous ==
When using shapes with the `round` keyword in `border-shape`, there is a jump from `0px` to `1px`. This jump becomes very noticeable when CSS animations are applied.

We need to find an algorithm different from `border-radius` to resolve this issue.

<img width="968" height="498" alt="Image" src="https://github.com/user-attachments/assets/fa22da5c-8715-4589-97cc-392641cdd799" />

```html
data:text/html;charset=UTF-8,<!doctype html>
<style>
  .test {
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    width: 200px;
    height: 200px;
    margin: 20px;
    border: 20px solid green;
    transition: all .3s;
  }
  .t1 {
    border-shape: inset(0 round 0px);
    &:hover {
      border-shape: inset(0 round 1px);
    }
  }
  .t2 {
    border-shape: inset(0 round 1px);
  }
</style>
<div class="test t1">inset(0 round 0px)</div>
<div class="test t2">inset(0 round 1px)</div>
```

`polygon(round)` has the same issue:

https://github.com/user-attachments/assets/756f8708-b720-47a0-bc36-c4af2d5fcc29

cc @noamr @LeaVerou @fantasai @SebastianZ @CGQAQ

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13914 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 11 May 2026 15:18:03 UTC