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

Re: Rounded corners

From: Chris Lilley <chris@w3.org>
Date: Wed, 01 Mar 2000 08:51:23 +0100
Message-ID: <38BCCBFB.51E06200@w3.org>
To: Jonny Axelsson <jonny@metastasis.net>
CC: www-style@w3.org


Jonny Axelsson wrote:
> 
> This is not my idea, and I have no use for it personally. But when I
> thought about it, it is rather intriguing. In a word:
>          TABLE {corner:1 solid black radius(5);}
> Source: <http://buzz.builder.com/cgi-bin/WebX?14@179.yHr5adnDjw6^0@.ee7eb51/0>
> 
> If nothing else, it'll make CSS3 a stronger competitor to Adobe Pagemaker...

OK, now flesh out the proposal. The samples cited at the url above were


                      TABLE {corner:1 solid black radius(5);}
                      DIV {corner:2 dotted red chamfer(6,45);} 

So firstly, what does 1,2 etc mean and how is that affected by writing
direction and vertical writing

Secondly, what does TABLE {corner:1 solid black radius(5) chamfer(6,45)}
do?

Thirdly, what units is this using

Fourthly, what happens to the width and height of contained boxes - do they
inherit a smaller size to take into account the rounded corners? Can there
be text on top of the rounding? In other words, what does this do to the
box model?


It seems to me that a simpler proposal would be to extend the background
property to allow "stretch to fit" as well as "tile" as a way to cover a
given background with a graphic which may not be exactly the same size as
the background.

This would work well with vector graphics, and particularly well with SVG;
an image that gives you a quarter-elipse is a tiny SVG file, and can be
displayed at any size with full fidelity, and can inherit colors from the
parent document.


<svg width="100%" height="100%"
 xmlns = 'http://www.w3.org/Graphics/SVG/SVG-19991203.dtd'>
 <ellipse cx="100%" cy="100%" rx="100%" ry="100%" 
  style="fill: currentColor"/> 
</svg>

and then

td#topleft { background: url(ellip.svg) stretch; color: #66F )

where background gets defined as 

'background' 
Value:   [<'background-color'> || <'background-image'> ||
[<'background-repeat'> || <'background-attachment'> ||
<'background-position'>] | <'bacground-stretch'>] | inherit  
Initial:      not defined for shorthand properties  
Applies to:   all elements  
Inherited:    no  
Percentages:  allowed on 'background-position'  
Media:        visual  

--
Chris
Received on Wednesday, 1 March 2000 02:51:28 GMT

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