User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1b2) Gecko/20081201 Firefox/3.1b2
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1b2) Gecko/20081201 Firefox/3.1b2
-moz-border-radius is ignored when -moz-border-image is set.
border:10px solid beige;
-moz-border-image: url(gradient.gif) 1 stretch;
In Webkit (with the -webkit- counterparts of these properties) border-radius works fine. In FF3.1b2 the corners are square.
Steps to Reproduce:
1. Set -moz-border-image to something meaningful
2. Set -moz-border-radius to something meaningful
3. Refresh the page.
The corners of the element were square.
The corners should be rounded.
We could probably fix this quite easily since I think we already have clipping code (for when we draw backrounds) that we could reuse.
Hm, but should we? The obvious reading of css3-background is that we should, since border-image is only "instead of" border-style, and border-width does still apply, but I feel like I'm splitting hairs in the absence of an explicit statement about how border-image interacts with border-radius.
The spec actually explicitly says that the border-image should not be clipped by border-radius:
# Backgrounds, but not the border-image, are clipped to the inner, resp.,
# outer curve of the border if ‘background-clip’ is ‘padding-box’ resp.,
# ‘border-box’. Other effects that clip to the border or padding edge (such
# as ‘overflow’) also must clip to the curve.
Or maybe it says that border-image is always clipped to the outer curve. I can't actually tell.
I think that it makes more sense if the border-image is clipped according to border-radius though. The designer set border-radius for a reason. It looks tragically ugly with the current implementation, it doesn't feel right.
These apart from the fact that Webkit seems to agree with my opinion too.
However, if the spec disagrees, I guess the right thing to do is to respect the spec. But does it? The part that David Baron quoted seems a bit ambiguous about this...
The spec says that the border-image is not clipped. I'll clarify this. The reason is that you may want a fancy-styled corner when border-image is supported but fall back to a curved one when it isn't. If you disagree and want the spec changed, please post to www-style explaining why this is a more important use case.
OK, marking this bug as invalid, then.
And for the record I brought this up on www-style: