W3C home > Mailing lists > Public > www-style@w3.org > March 2013

Re: [css4-background] use cases for 'border-corner-shape'?

From: Liam R E Quin <liam@w3.org>
Date: Fri, 29 Mar 2013 15:41:41 -0400
To: Simon Fraser <smfr@me.com>
Cc: Lea Verou <lea@w3.org>, "L. David Baron" <dbaron@dbaron.org>, www-style@w3.org
Message-ID: <1364586101.17360.256.camel@localhost.localdomain>
On Fri, 2013-03-29 at 09:47 -0700, Simon Fraser wrote:
> Have you considered how corner-shape interacts with the corner joins
> between borders of different widths, colors and styles? That's where
> most of the implementation complexity lies.

Seems to me it's exactly the same whether the curve goes out (as now) or
goes in (scallop) or is replaced by a straight line (bevel).

A difficulty with simulating these in SVG is that generally you want
constant line thickness when the box changes shape. I think if that
problem were solved then an SVG decorative-border approach might in fact
be better. In the XPPL WG we talked about using SVG morphing or even
animation to define shapes that could grow automatically, but that never
made it into a spec.

Real printed borders often have more complex corner shapes - a scallop
shape combines a curve and small notches for examples, the notches
themselves having rounded corners. But printed borders usually have
additional decoration and the top/start/before/head centre and/or sides,
so the border-image-slice trick doesn't work very well for them;
something like the 16 name regions approach is better.

I'd rather see something more general and then say rectangles are a
(very common) special case. For example, define borders as a list of
segments and joins, i.e. a path with per-segment styles, and then say
how a rounded-corner box maps to that.

Rest of this message has links to some concrete examples of printed
rectangular borders that are on my Web site. I wasn't trying to make a
survey of border styles, although I could do more of that if
implementors think it useful.



(2) a coloured version that one might do with images:

Note the horizontal and vertical straight parts of these borders are
extensible by repeating fragments (at least in theory). Most Victorian
borders like this were either engraved around an image or were made of
multiple parts that could be fitted together for printing.

German printed border, using standard printers' rules for the lines so
they are extensible, and blocks for the corners.

An eigheenth-century French example using pieces of type; this technique
is still used today.

(5) nested borders (presumably one would e.g. nest div elements in HTML)
The inner geometric border was pobably done with type, just like example
(4), and the outer border was engraved with separate corner and side
pieces that happen to touch, or almost touch.

More examples sorted by popularity (based on downloads) at
but I tend to scan ornate or unusual borders more than plain ones.

Liam Quin - XML Activity Lead, W3C, http://www.w3.org/People/Quin/
Pictures from old books: http://fromoldbooks.org/
Ankh: irc.sorcery.net irc.gnome.org freenode/#xml
Received on Friday, 29 March 2013 19:41:48 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:27 UTC