Re: [Backgrounds/Borders] What to do when a border-image fails to load

On Apr 1, 2009, at 12:14 PM, fantasai wrote:

> Brad Kemper wrote:
>>> border-image: url(Aladdins_Lamp.png) 4 125 141 44 // 0px 14px 12px
>>> 27px / stretch round;
>> Yes, that works for me (except no third slash before the "stretch  
>> round" part). Note that currently in the WD, omitting the second  
>> set of numbers means that the image border width will be equal to  
>> the border-width property value, which is much less useful that  
>> just having a 1 to 1 correspondence between image pixels and CSS  
>> pixels.
>
> It depends on what you're trying to do and whether you're using vector
> images or not. If you want to give the border some texture but not  
> to give
> it shape, then you'd want to match the border-width. I can see the
> usefulness of an easy way to say "use the intrinsic size", but I think
> there should also be a way to say "use the given border-width".

I can see your point. Of course, you could put the texture into  
intrinsically-sized tiles too. You just wouldn't be able to use the  
same image for lots of different border-widths (how important is  
that?). But you could have the corners meet up in more interesting ways.

See, even if the corners are rectangular, once you have "use the given  
border-width", you are limited to corners that are 1-border-width x 1- 
border-width in dimension, with the entire rest of the border  
repeating or stretching. Which means no curved corners (a la border- 
radius), scalloped corners, or any corner that is not the same width  
and height as the border-width. Because otherwise your image divisions  
are going to be at least as wide as that corner, with a lot of empty  
space in the side sections that you would not want to squeeze into the  
width of 'border-width'.

If we did retain the option for "use the given border-width" (which I  
am beginning to think is not worth the extra complexity), I imagine it  
looking something like this:

This:

border-image:
	url(Aladdins_Lamp_border.png)
	4 125 141 44
	/ / 0px 14px 12px 27px
	stretch round


would be the same as:

border-image:
	url(Aladdins_Lamp.png)
	4 125 141 44
	/ intrinsic-width / 0px 14px 12px 27px
	stretch round


but to match any border-width, something like this:

border-image:
	url(pattern_with_small_square_corners.png)
	4 125 141 44
	/ border-width / 0px 14px 12px 27px
	stretch round