Re: [CSS3 Backgrounds and Borders] border-radius

On Jul 6, 2006, at 9:07 PM, Laurens Holst wrote:

> Joost 'AlthA' de Valk schreef:
>> When an element has a border-radius that is more than half the the  
>> element's width or height, should it draw a border at all?
>>
>> F/I:
>>
>> <div style="height: 50px; width: 50px; border-radius: 30px;  
>> background-color: #0f0;"></div>
>>
>> In WebKit, this div will not be rounded, since it's height is to  
>> low to have a rounded with a radius of 30px. The spec, up till  
>> now, says nothing of how to behave in this situation. My  
>> suggestion would be to add:
>>
>> "If the border-radius is more than half of the width or height of  
>> an element, the border-radius is not drawn at all."
>>
>> I'd like to hear your opinion on this situation.
>
> Hi Joost,
>
> I would prefer the curved border to be drawn, up to half the  
> available height/width (so in effect the border would look a bit  
> pointy halfway the box; probably people will put this effect to  
> good use :)!). Alternatively, if the radius doesn’t fit, it could  
> be adjusted to the largest value that does.

This is what Firefox seems to do at the moment, and could thus be a  
good alternative. Creating a pointy thing halfway seems wrong to me,  
and not the kind of thing people would expect when their chosen  
radius is to big...

>
> This would look a lot better for cases where the radius is  
> specified in pixels, but the height is determined by e.g. the  
> content height (it might occasionally only contain 1 line) or em  
> units (the user may have selected smaller fonts than the designer),  
> etc.
>
> Having one box with square corners on a page filled with boxes all  
> having rounded corners would look pretty bad.

Agreed, you guys have me convinced that it should draw a radius :).  
The thing we all agree on i think is that the spec needs  
clarification on how to handle this.

Kind regards,
Joost de Valk

Received on Friday, 7 July 2006 11:00:03 UTC