Last Comment Bug 472561 - border-radius is ignored when border-image is set
: border-radius is ignored when border-image is set
Product: Core
Classification: Components
Component: Layout: Block and Inline (show other bugs)
: unspecified
: All All
-- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
: Jet Villegas (:jet)
Depends on:
  Show dependency treegraph
Reported: 2009-01-07 13:51 PST by Lea Verou
Modified: 2009-01-10 11:46 PST (History)
7 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Description User image Lea Verou 2009-01-07 13:51:20 PST
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.

Test case:
		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.

Reproducible: Always

Steps to Reproduce:
1. Set -moz-border-image to something meaningful
2. Set -moz-border-radius to something meaningful
3. Refresh the page.
Actual Results:  
The corners of the element were square.

Expected Results:  
The corners should be rounded.
Comment 1 User image David Baron :dbaron: ⌚️UTC-8 2009-01-07 14:00:13 PST
We could probably fix this quite easily since I think we already have clipping code (for when we draw backrounds) that we could reuse.
Comment 2 User image Zack Weinberg (:zwol) 2009-01-08 08:58:42 PST
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.
Comment 3 User image David Baron :dbaron: ⌚️UTC-8 2009-01-09 15:33:51 PST
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.
Comment 4 User image Lea Verou 2009-01-09 15:45:58 PST
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...
Comment 5 User image fantasai 2009-01-10 10:45:54 PST
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.
Comment 6 User image David Baron :dbaron: ⌚️UTC-8 2009-01-10 10:59:32 PST
OK, marking this bug as invalid, then.
Comment 7 User image David Baron :dbaron: ⌚️UTC-8 2009-01-10 11:01:21 PST
And for the record I brought this up on www-style:

Note You need to log in before you can comment on or make changes to this bug.