-webkit-border-radius has broken logic: if an element width or height is less than radius*2, it never renders at all. I'll tell why this logic is broken: 1. Not in every case we can specify or know min-width or min-height. We set -webkit-border-radius: 7px; to get something like beiges (number of new letters or unread RSS news etc), and we get 12 blocks, 6 of which are rounded (numbers 23, 46 etc) and 6 are not (single character, 1 etc). So the -webkit-border-radius is useless in this case. 2. We never can create ovals, alas! When we specify -webkit-border-radius, expecting that two rounded corners meet in the middle, we should be exactly sure about width and height of the block. So we should control block content, font render and much more parameters. So, I think, with this logic -webkit-border-radius is half-useless. I can understand this logic, but I think Firefox acts correctly in this particular case - it makes rounded corners with the radius it can apply, it resolves both situations. Steps to reproduce: 1. Make page with small blocks or spans and try to specify -webkit-border-radius to make them oval. Add background-color to control the process. 2. Add some blocks with this class and place long text into some of them and a character 1 (number one) into others. Actual results: some of blocks are not rounded. We cannot be sure, that rounded blocks will render as rounded. Expected results: all the blocks should be rounded. If width>=radius*2 and height>=radius*2, -webkit-border-radius value should be used, and if not, border-radius should decrease to the maximum value that can be used, making oval (width/2 or height/2 depending on which is smaller). This behaviour we see in Firefox browser. Related bugs: https://bugs.webkit.org/show_bug.cgi?id=8736 (more specific case)
<http://www.w3.org/TR/2008/WD-css3-background-20080910/#border-radius>: "The sum of two adjacent radii may not be more than the width or height (whichever is relevant) of the box. If any sum exceeds that value, all radii are reduced according to the following formula: Let f = min(Li/Si), where i ∈ {top, right, bottom, left}, Si is the sum of the radii of the corners on side i, and Ltop = Lbottom = the width of the box, and Lleft = Lright = the height of the box. If f < 1, then all corner radii are reduced by multiplying them by f."
All in all, this document declares, that border-radius should be reduced when needed and not turned off.
*** Bug 21749 has been marked as a duplicate of this bug. ***
Yeah the reduction text wasn't in the spec at the time I implemented this. Since I wasn't sure what to do I opted for not rendering. Now that it has been specified, we know how to fix this.
*** This bug has been marked as a duplicate of 8736 ***