Smooth corners on rectangles

[Pav Sidhu]

If I set a div with the following CSS, I don't get the correct shape.

.box {
  width: 200px;
  height: 100px;
  --smooth-corners: 4;
  mask-image: paint(smooth-corners);
  -webkit-mask-image: paint(smooth-corners);
  background: #d01257;
}

Does this only work with squares?

[James Harris]

Looks like the Paint API isn't supported in the browser you are using. See https://caniuse.com/css-paint-api for supported browsers.

Your example looks like the following in a supported browser:

[Pav Sidhu]

@wopian Just to confirm I am using Chrome, perhaps I didn't provide a clear example, but you can see that the left and right sides are slightly curved. Let me know if you would like a clearer example.