W3C home > Mailing lists > Public > www-style@w3.org > February 2002

Re: RFC: ability to assign images to corners

From: fantasai <fantasai@escape.com>
Date: Thu, 28 Feb 2002 18:12:12 -0500
Message-ID: <3C7EB94C.F85C27D2@escape.com>
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


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.


      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
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 - 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

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
             |     |//////////// 

          border-corner-clip: -33% -100%;

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.

Received on Thursday, 28 February 2002 18:09:00 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:13 GMT