IMO, doesn't look any worse than Firefox but I'll let paint team decide.

I don't know how it looks on firefox but that's irrelevant. It definitely looks worse than it should.

Its relevant because there's often specifications that limit implementation choices. If multiple browsers have similar output that's often a good sign that things are actually working as intended (despite not working as expected).

That said, I don't have relevant expertise here so someone on the paint team will have to decide if this is actually a bug.

This is probably the best we can do. Looking at your zoomed in picture, you can see we have only a few pixels to draw something that looks like an arc, and you simply can't draw an accurate arc in a tiny number of pixels. I'll verify the situation when I can get to a low DPI machine.

> This is probably the best we can do. 
> you simply can't draw an accurate arc in a tiny number of pixels

No it isn't. 

You definitely can draw a more accurate arc in that amount of pixels.

Attached is the proof.

Deleted: Untitled.png 572 bytes

	Untitled.png 572 bytes View Download

I think the reason you're seeing this is that the border shape does not actually describe a circle. I.e you have box (square) that's 1.2em x 1.2em. You have a border box that's 1.2em+2px squared. You apply a 0.6em border-radius to that, meaning that what you get doesn't describe a circle - but something fairly close to it (because of the extra px.)

Try "box-sizing: border-box;" or "border-radius: calc(0.6em + 1px);" - or some variation thereof that make sure that the radii "line up" with the dimensions. Hope that helps.

That would explain an additional very short flat horizontal and vertical segment on each border, but it doesn't explain that the rounded corners aren't rounded at all, but perfectly diagonal (or if you prefer, are very poorly antialiased and don't look like arks at all).

In other words, this is approximately how it should look like.

Deleted: ppp.png 585 bytes

	ppp.png 585 bytes View Download

And here's a version with your correction:
http://jsbin.com/geqete/edit?html,css,output

this one should actually be a perfect circle, and you can still see how it is pretty far from it, and much closer to a perfect octagon.

Either the rounding (i.e. arc drawing) or the antialiasing are broken.

Deleted: Untitled2.png 585 bytes

	Untitled2.png 585 bytes View Download

I'm going to take a guess and say that this might be because we end up producing a hairline stroke, and either the flattening step when drawing that stroke is too coarse (allows too large error) or doesn't use subpixel precision.

It looks more like a circle if you make the border 2px?

This bug reminds me of  https://crbug.com/102411  & http://skbug.com/2769. +cc Cary just in case.

This goes south before it hits Skia:

* for the original case (c#1), we draw a 18x18 rrect with 7.9 radii (off by 1.1)
* for the border-box case (c#10), we draw a 16x16 rrect with 7.9 radii (off by 0.1)

What appears to work best is fs@'s second suggestion (border-radius: calc(0.6em + 1px);): http://jsbin.com/siqefi/1/edit?html,css,output

^ for which we draw a 18x18 rrect with 8.9 radii (still 0.1 off, but less noticeable due to the larger size).

So the radii calculation is off for some reason.

For reference, here's Skia's rendering of the same geometry but with matching radii (18x18/9 rrect): https://fiddle.skia.org/c/9d3697574abcb65d11e2a45c137f80ec

> So the radii calculation is off for some reason.

I don't understand in what way that explains the rounded corners being less round, but if it's true that the radius calculation is wrong, could that explain https://bugs.chromium.org/p/chromium/issues/detail?id=631507 ?

Most likely not: the main complaint there appears to be related to AA quality, not geometry.

> Most likely not

So, correct me if I am wrong: the radius is wrong, but the position of the center of the circle ark is consistent with the wrong radius, right? Otherwise, I wouldn't see how a wrong radius would not result in artifacts at the junctions.


> the main complaint there appears to be related to AA quality, not geometry

Well, the complaint is that the result of the rendering is incorrect.

That the error is in AA and not somewhere else is either a conclusion someone has arrived at (I hope it is) or an assumption someone has made.

> So, correct me if I am wrong: the radius is wrong, but the position of the center of the circle ark is consistent with the wrong radius, right? > Otherwise, I wouldn't see how a wrong radius would not result in artifacts at the junctions.

The geometry is not represented as 4 arcs + 4 lines, but a rectangle + 8 radii.  So there is no "arc" per se: the arcs are derived at rasterization time such that the junctions are always "perfect" (as long as the radii are not degenerate).

So passing the wrong radii is not going going to result in misaligned corner edges, but just smaller/larger arcs.