- From: fantasai <fantasai@escape.com>
- Date: Thu, 28 Feb 2002 18:12:12 -0500
- To: www-style@w3.org
Bert Bos wrote:
>
> Of course, the best way you can help is to send concrete proposals.
(Listing top/left only. Assume inherit | initial for all properties.)
Width refers to the border's width, whether it be vertical or horizontal.
border-top-width: <length> | thin | medium | thick | auto
initial: medium
auto - The greater intrinsic width of the image(s), other than the center
image*, used in the border.
* See border-image
shorthand: border-width: [<length> | thin | medium | thick | auto]{1,4}
comments: Could be rewritten as
border-top-width: auto? [<length> | thin | medium | thick]
allowing another length to be specified as a fallback if
there is no image. (The alternative would be to default to
medium.)
-----
border-top-image: <uri> {1,3} | none
initial: none
If one image URI is given, the first tile is centered on the border line.
If two image URIs are given, they meet at the center of the border line
with the first image placed on the top/left side of the center.
If three image URIs are given, the second becomes the center and does not
tile. The other two are placed on either side of the center image, with
the first going on the top/left side of the center and the third going
on the bottom/right.
Examples:
border-top-image: url(wave.gif) /* [~*~] */
+*~|~*~|~*~|~*~|~*+
| |
+-----------------+
border-top-image: url(wave.gif) url(line.gif) /* [~*~] [-^-] */
+|~*~|~*~|-^-|-^-|+
| |
+-----------------+
border-top-image: url(wave.gif) url(swirl.gif) url(line.gif)
+~*~|~*~|@|-^-|-^-+
| |
+-----------------+
Border images extend to the perpendicular at the inner edge of the corner
image area, as determined by the border-corner-clip property, or the box's
border edge, whichever is closer. (The border image area itself never
overflows the border box, although an unclipped image might overflow the
area.)
Exceptions exist when the border-corner-image is 'continuous'.
shorthand: border-image: [<uri> | none] {1,4}
Sets a single image as the border image, following
border-style's assignment pattern.
Comments: This could also be used as a value for border-style instead
of creating a new property.
Should assigning an image make the regular border disappear
or should it render on top of the border? (If the latter,
then this needs to be a separate property.)
-----
border-topleft-image: <uri> | continue | none
initial: none
This property assigns an image to the corners of the border. The
outer corner of the image is aligned with the outer corner of the
border's corner area.
continue - No image is assigned, and the border image area extends
through the corner area to the border edge.
(border-corner-clip is ignored.) The two sides are
clipped at 45 degree angles to form a mitered corner.
The area of the corner is determined by the perpendicular corner
radii and the outer border edge lines or by extending perpendiculars
from the padding edge corner, whichever yields a greater area. If
border-corner-image is not 'continue', the area is also modified by
the border-corner-clip property.
border-radius: 0; border-radius: 4px;
......____________ ..........__________
:===== :=====.='=
:=====____________ :==.'====,----------
| | :=.===.'==
| | :,===,====
| | | |
| | | |
A corner image is placed over any other border images.
shorthand: border-corner-image: [<uri> | continue]
| [<uri> | continue]{4} | none
If four values are present, they set the top left, top right, bottom right,
and bottom left, respectively.
-----
Border Fit Properties
These properties determine if and how the border image(s) will tile.
Meanings are as follows:
clip - Place one tile without scaling and clip overflow.
repeat - Repeat the image until it fills the border area and clip
any overflow
scale - Repeat the image as close to filling the area as possible
and scale all tiles up or down as necessary to fill the area
without overflow.
stretch - Stretch (or shrink) the image so one tile covers the
whole area.
overwrite - Place a single tile without scaling and don't clip
overflow.
overflow - Repeat the image as many times as necessary to fill
the area and don't clip overflow.
border-top-fit-width: [clip | repeat | scale | stretch | overwrite
| overflow] {1,2}
initial: repeat
This property determines the image handling in the border's width
dimension (i.e. vertically for a horizontal border, horizontally for
a vertical border). If the border-image property specified a center
image, then the second value applies to that image. Otherwise, it is
ignored.
shorthand: border-fit-width: <border-fit>{1,4}
Assigns the values as for border-style.
border-top-fit-length: [clip | repeat | scale | stretch | overwrite
| overflow] {1,2}
initial: repeat
This property determines the image handling in the border's length
dimension (i.e. vertically for a vertical border, horizontally for
a horizontal border).
shorthand: border-fit-length: <border-fit>{1,4}
Assigns the values as for border-style.
border-fit: <border-fit> <border-fit>?
The second value, if present, applies to the width. If
there is only one value, it sets both border-fit-width
and border-fit-length
border-topleft-fit: [clip | repeat | scale | stretch | overwrite
| overflow] {1,2}
initial: overwrite
This property determines border corner image handling. If a second
value is present, it applies to the horizontal dimension.
shorthand: border-corner-fit: <border-corner-fit> | <border-corner-fit>{2}
| <border-corner-fit>{4}
If one value is present, it sets the border-corner-fit for all corners.
If two values are present, the second value applies to the horizontal
dimension. If four values are present, they set both dimensions for the
top left, top right, bottom right, and bottom left corners respectively.
-----
border-corner-clip: [<length> | <percent> | curve] {1,2}
| [<length> | <percent>] {4}
initial: 0
percent: of default corner size (See above)
border-corner-clip determines the area for the corner image. Lengths
and percentages are _added_ to the default area.
(See border-corner-image, above)
Negative values are allowed. However, if the calculated inner edge
winds up outside the calculated outer edge, then the computed value
of the inner edge is only enough to align it with the outer edge,
not enough to invert the corner area.
A single value pertains to all sides of the corner area. If there are
two values, the second value pertains to the inner sides (e.g. bottom
and right for the top left corner). If there are four values, they
pertain to the horizontal outer, vertical inner, horizontal inner,
and vertical outer sides, in that order.
,- horizontal outer
........_____________
: ;
vertical outer -: ; - vertical inner
:,,,,,,;____________
| \ |
| ` horizontal inner
curve - Causes the image to be clipped along the curve described by
the border-radius property.
Example: border-corner-clip: 33%;
_________
| ........|..........
| : : |
| : : |
| :.......|..........
|_:_____:_|
: :
: :
border-corner-clip: 33% -33%;
,
_____
| ....|............
| : | :
, , |_:___| : , , , , ,
:.....:..........
: , :
: , :
_____
| | X - images overlap
| |////////////
|_____|////////////
\\\\XX///////////
\\\\\\
\\\\\\
border-corner-clip: -33% -100%;
_
|_|
XXXXXX////////
XXXXXX////////
XXXXXX////////
\\\\\\
\\\\\\
\\\\\\
border-corner-clip has no effect on the width of the border during
layout calculations--it has a painting effect only.
shorthand: border-corner-clip: [<length> | <percent> | curve] {1,2}
| [<length> | <percent>] {4}
A single value sets border-corner-clip for all four sides
of all four corners. A second value, if present, applies to
the eight inner sides. If four values are present, they
apply to all sides of the top left, top right, bottom right,
and bottom left corners respectively.
Comments: rename to border-corner-area?
----
BTW, the border-radius properties should follow the pattern
border-topleft-radius to be consistent with border-top-style
et al.
~fantasai
Received on Thursday, 28 February 2002 18:09:00 UTC