The default bug view has changed. See this FAQ.

border-radius is ignored when border-image is set

RESOLVED INVALID

Status

()

Core
Layout: Block and Inline
RESOLVED INVALID
8 years ago
8 years ago

People

(Reporter: Lea Verou, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

8 years ago
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:
	div
	{
		border:10px solid beige;
		-moz-border-image: url(gradient.gif) 1 stretch;
		-moz-border-radius:10px;
		padding:10px;
	}

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.
We could probably fix this quite easily since I think we already have clipping code (for when we draw backrounds) that we could reuse.
Status: UNCONFIRMED → NEW
Component: Style System (CSS) → Layout: Block and Inline
Ever confirmed: true
Flags: blocking1.9.1?
OS: Windows Vista → All
QA Contact: style-system → layout.block-and-inline
Hardware: x86 → All
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. 
http://dev.w3.org/csswg/css3-background/#the-border-radius

Or maybe it says that border-image is always clipped to the outer curve.  I can't actually tell.
(Reporter)

Comment 4

8 years ago
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

8 years ago
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.
Status: NEW → RESOLVED
Last Resolved: 8 years ago
Resolution: --- → INVALID
And for the record I brought this up on www-style:
http://lists.w3.org/Archives/Public/www-style/2009Jan/thread.html#msg125
Flags: blocking1.9.1?
You need to log in before you can comment on or make changes to this bug.