Skip to content
This repository

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

lojjic opened this Issue May 22, 2010 · 2 comments

1 participant

Jason Johnston
Jason Johnston
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

Jason Johnston
lojjic commented July 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.

Jason Johnston lojjic referenced this issue from a commit November 13, 2011
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
Jason Johnston


Jason Johnston lojjic closed this November 13, 2011
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.