New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bumps on corners when border-width is larger than border-radius #11

lojjic opened this Issue May 22, 2010 · 2 comments


None yet
1 participant

lojjic commented May 22, 2010

When the border-width for an element is larger than the border-radius for one or more of its corners, then that corner will be rendered with some extra "bumps" sticking out from it. This is due to the fact that the calculated path ends up crossing itself in the corners, and the quadratic curve gets drawn concave rather than convex.

This is easily seen in some of the IE9 border-radius testcases, e.g. border-radius-sum-of-radii-001.htm


This comment has been minimized.


lojjic commented Jul 16, 2010

Also see for a related testcase. This one is happening when the border is solid all the way around and some corners are 0-radius.

lojjic pushed a commit that referenced this issue Nov 13, 2011

Jason Johnston
Fix issues with rendering of rounded borders:
 - Box path calculation has been improved to ensure a correct (squared) path when the shrink is greater than the radius.
 - Rewrote border renderer to use only fills with "eofill" subpaths to make the cut-outs for dashed/dotted/double styles.
 - Dashes are now centered along the edge like WebKit does.
 - Removed all logic around VML stroke as it is no longer used.
 - Flattened the getBoxPath method signature to avoid unnecessary transient object creation.
Fixes issue #11

This comment has been minimized.


lojjic commented Nov 13, 2011


@lojjic lojjic closed this Nov 13, 2011

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment