Skip to content
This repository has been archived by the owner on Apr 20, 2023. It is now read-only.

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

Closed
lojjic opened this issue May 22, 2010 · 2 comments
Closed

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

lojjic opened this issue May 22, 2010 · 2 comments

Comments

@lojjic
Copy link
Owner

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

@lojjic
Copy link
Owner Author

lojjic commented Jul 16, 2010

Also see http://css3pie.com/forum/viewtopic.php?f=3&t=12 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
 - 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
@lojjic
Copy link
Owner Author

lojjic commented Nov 13, 2011

Fixed.

@lojjic lojjic closed this as completed Nov 13, 2011
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant