Consider merging https://chromium.googlesource.com/chromium/blink/+/927872e324ae7520ab32567d07fb988b1733bec8 This fixes the bug that the border radius partially disappeared or had wrong color when it was too steep or too shallow. Fix 1: Use the correct clipping quad, generated by intersecting border mitre lines to diagonal lines of the corner ellipse arc. RenderBoxModelObject::clipBorderSidePolygon was generating wrong clipping quad. It was based on a wrong assumption that rounded border would not cross {horizontal,vertical} line through the box center. Fix 2: Correctly split a quad into two quads. A clipping quad is split into "AND" of two quads to set anti-aliasing on both edges individually. Generate these quads properly by extending a vertex parallel to the opposite edge.
I haven't looked into Code to see whether it is easy to merge but Safari Technology Preview 154 still has issue in following test cases and show patches of other colours (e.g. red in blue): Test Case - borderRadiusMultiColors02.html - https://jsfiddle.net/zt3s52yh/show Test Case - borderRadiusMultiColors01.html - https://jsfiddle.net/7y24h61x/show Just wanted to highlight. Thanks!
<rdar://problem/100420688>