Re: [css3-background] does border-radius round the border-image ?

I have created a test page:

http://www.bradclicks.com/cssplay/TV-Border.html

This page shows how "border-image" can interact with a few other  
properties to meet my authoring expectations, and how well the  
bleeding-edge versions of WebKit and Firefox (Minefield) meet those  
expectations. The design and expectations are based on the notion that  
one of the key benefits of border-image is in creating border shapes  
that cannot be created with traditional border edges. Another is that  
the author may want to be able to create a best-case fallback for UAs  
that don't support border-image.

Among my observations:

1. "background-clip" plays a vital role in combining "border-image"  
and backgrounds.

2. That while some might consider it reasonable to clip the border- 
image based on the curved corners of a stroked border of a different  
width that is hidden by border-image (I don't), it really doesn't make  
sense to do so when the background is clipped to the padding-box. In  
those cases, the border-image (which can create a completely different  
shaped and width border than the stroked border) is the only thing  
that is being clipped by that line. And if, as David Hyatt indicated  
elsewhere, WebKit will be trimming the background and foreground to  
the inner edge of the curve, then the outer edge curve of the corner  
should not play a role in clipping other things anyway. But the border- 
radius does still have a useful purpose for fallback and for trimming  
other things along its inner edge.

3. Box-shadow can be useful for fallback, but has no other significant  
useful role when border-image is present. Any desired shadow can be  
created in the same image pieces used anyway for border-image. The  
only (slight) advantage box-shadow has over image-based shadows (once  
you are using images for your borders anyway) is that box-shadows  
don't take up space. But given that the space can be dealt with via  
negative margins, etc., and that the shadow will often (if not  
usually) follow a different path that that of the outer edges of the  
images, then fallback becomes the most useful reason to combine border- 
image and box-shadow. Thus, just as the stroked border is hidden when  
border-image is being used, so should the box-shadow be hidden.


On Jan 10, 2009, at 12:17 PM, David Hyatt wrote:

>
> I think border-radius should clip the border-image, just as it clips  
> the background.  In many cases I believe the border-radius should  
> clip the foreground too.  Border-image alone is not able to dictate  
> this clipping behavior, so a designer *is* going to need to set both  
> in order to clip the background and foreground content, regardless  
> of fallback intentions.
>
> I think it's inconsistent that this clip effect, which we'd like to  
> apply to the whole box in the case of content like images, would  
> "turn off" just for a single piece of the box (a specified border  
> image).  I don't think the fallback use case is particularly  
> interesting or relevant here.
>
> dave
> (hyatt@apple.com)
>
> On Jan 9, 2009, at 6:27 PM, L. David Baron wrote:
>
>>
>> On Friday 2009-01-09 16:20 -0800, Brad Kemper wrote:
>>> # Specifies an image to use instead of the borders created by the
>>> ‘border-style’, 'border-width',  'border-color', 'border-radius',  
>>> and
>>
>> border-width does matter some of the time.
>>
>>> 'box-shadow' properties and an additional background image for the
>>> element. Unless the value is ‘none’ or if the image cannot be  
>>> displayed,
>>> the element will be displayed as if border-style and 'box-shadow'  
>>> had
>>> value of 'none' and 'border-radius' had a value of 0, and only
>>> 'border-image' will be used to generate any border, curved corner,  
>>> or box
>>> shadow effects.
>>
>> If the border-image had the curve built in, wouldn't you want the
>> border-radius to continue to apply to the background?
>>
>> -David
>>
>> -- 
>> L. David Baron                                 http://dbaron.org/
>> Mozilla Corporation                       http://www.mozilla.com/
>>
>
>