Re: Clip & shaped borders + error/ambiguity in spec

--- I wrote:
> Which leads me neatly onto one of the other things I
> really want to see, viz. shaped borders.
> There are three possible ways of doing this:
> 1. Via a border-shape property.
> The initial difficulty here is that it seems to
> complicate the box model unduly.
> However, this difficulty is entirely avoided if you
> draw the largest shape that can be drawn within the
> element box.
> 2. Via an outline-shape property. This entirely
> avoids
> any problems with complication of the box model.
> 3. Clip-border, clip-border-color, etc. This, IMO,
> is
> the best of all the options. This would take all the
> valid values for border but would allow shaped
> borders.
> The main advantage of this is that it allows the
> shapes I have proposed for clip to be reused, and
> also
> avoids complication of the box model. The main thing
> of note is the position of the border - would it go
> inside the clipping region or around it?

Perhaps in my eagerness to avoid having multiple
versions of the same thing I overlooked the fact that
shapes are more frequently required as true borders
than as clipping regions.

The issue is whether it is better to re-use clip
(which is really intended for overflowing content) or
to use border or outline.

The chief difficulty with border is that it impacts
heavily on layout via the box model

> However, this difficulty is entirely avoided if you
> draw the largest shape that can be drawn within the
> element box.

The difficulty with outline is that it is intended as
a property that goes around content (often
non-rectangular but still right-angled polygon).

All this means that clip still remains the best
option, but with the possible amendment that it is
amended from applying to overflow != visible, to
applying to all content but with the proviso that that
when overflow: visible, what it does is draw an


P {clip: oval;
overflow: visible; /* Initial */
clip-border: solid thin}

Would simply draw a oval border round P. And:

P {clip: oval;
overflow: visible; /* Initial */
clip-border: none; /* Initial */}

Would do nothing at all because there is no border.

To conclude therefore, when overflow: visible, the
only function of clip is to draw borders, but when
overflow != visible, clip has the same function as it
does now, but with the addition that it also draws

1. Note the clip: oval. This is an amendment to my
proposed clip syntax that would draw the smallest oval
that will hold the content block.

Equally clip: circle would draw the smallest circle in
which the content block can be circumscribed.

Here is where I believe rotation is the most useful:

clip: circle(140deg). This would rotate the
aforementioned smallest circle.

The advantage of these syntaxes is that they are very
simple and easy to understand.

Note, however, that they are only of use when
overflow: visible (i.e., most of the time).

A similar thing could be done for poly - clip:
poly(Sides) - e.g., clip: poly(6) would draw the
smallest hexagon.

From Matthew Brealey ( (for law)or (for CSS))
Do You Yahoo!?
Bid and sell for free at

Received on Thursday, 4 November 1999 08:32:51 UTC