W3C home > Mailing lists > Public > www-style@w3.org > September 2009

Border-Images and oversized corners: CSS Backgrounds and Borders Module Level 3

From: Brad Kemper <brad.kemper@gmail.com>
Date: Sat, 26 Sep 2009 18:42:18 -0700
Message-Id: <DB21DB5E-8E81-4174-A7B4-B918EB12340C@gmail.com>
To: www-style list <www-style@w3.org>
I'm looking at the editor's Draft of the "CSS Backgrounds and Borders  
Module Level 3". I noticed that in 5.3 'border-image-width' that it  
says the following:

If two opposite ‘border-image-width’ offsets are large enough that  
they overlap, then their used values are proportionally reduced until  
they no longer overlap.

That is a good idea, because it sounds like I can use 'border-image'  
analogously to 'border-radius' when the box is too small for the  
specified values, as I think it should. But I wonder if we should be a  
bit more explicit, with language and formula matching that of 'border- 
radius', which says this:

The sum of two adjacent radii may not be more than the width or height  
(whichever is relevant) of the box. If any sum exceeds that value, the  
used values of all radii are reduced according to the following  
formula: Let f = min(Li/Si), where i ∈ {top, right, bottom, left}, Si  
is the sum of the radii of the corners on side i, and Ltop = Lbottom =  
the width of the box, and Lleft = Lright = the height of the box. If f  
< 1, then all corner radii are reduced by multiplying them by f.

Thus, for 'border-image' we would have:

The sum of two opposing ‘border-image-width’ offsets  may not be  
more than the width or height (whichever is relevant) of the box. If  
any sum exceeds that value, the used values of all ‘border-image- 
width’ offsets are reduced according to the following formula: Let f  
= min(Li/Si), where i ∈ {top, right, bottom, left}, Si is the sum of  
the ‘border-image-width’ offsets intersecting side i, and Ltop =  
Lbottom = the width of the box + left and right offsets, and Lleft =  
Lright = the height of the box + top and bottom offsets. If f < 1,  
then all ‘border-image-width’ offsets are reduced by multiplying  
them by f.

That does make it clear (-ish) that all offsets are reduced  
proportionally, not just the two opposite offsets (if I understand  
this formula correctly). If it was just the two opposite offsets,  
there would be unwanted distortion, and an unwanted difference between  
rounded corners created via 'border-radius' and rounded corner images  
used in 'border-image'. On the other had, maybe this formula could be  
stated more simply for both border-radius and border-image?

We could also go further, in item 2 (Scale to length) of 5.6 (Border- 
image drawing process), add another bullet:

Scale to length.
If the the middle part of the border-image area has zero width, then  
the top, middle and bottom images are not drawn.
By the way, I was thoroughly confused by the following sentence/formula:
If X ≠ 0 is the width of the image and W is the width of the padding  
area, then the rounded width X' = W / ceil(W / X)
I start reading it as "If X is not equal to zero is the width..." That  
seems to have two verbs. Also, I don't think the padding area is  
relevant to this calculation any more, since the introduction of the  
whole 'background-image-offset' idea.


[1] http://dev.w3.org/csswg/css3-background/#the-border-image-width
Received on Sunday, 27 September 2009 01:43:01 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:21 GMT