[css3-background] border-radius shorthand and elliptic corners

Hi,

I think it's important that the border-radius shorthand supports elliptic  
corners as well and that you don't have to resort to the four longer  
properties if you want to make elliptic corners. I have a proposal that  
builds on the proposal that is currently under Issue 4 in  
http://csswg.inkedblade.net/spec/css3-background the wiki.

The syntax would be something like this (it's likely that I get this  
wrong):

   <length> [<length> [<length> <length>?]?]?
   [/ <length> [<length> [<length> <length>?]?]?]?

Missing <length> values are filled in using the repeating pattern (top  
left, top right, bototm right, bottom left). If no <length> after / is  
provided they are identical to their radii counter value otherwise they  
follow the repeating pattern too.


Examples:

   border-radius:4em / 5em

would be equivalent to:

   border-top-left-radius:4em 5em;
   border-top-right-radius:4em 5em;
   border-bottom-right-radius:4em 5em;
   border-bottom-left-radius:4em 5em


   border-radius:2em 3em 1em / 2em 1em

would be equivalent to:

   border-top-left-radius:2em 2em;
   border-top-right-radius:3em 1em;
   border-bottom-right-radius:1em 2em;
   border-bottom-left-radius:3em 1em


   border-radius:2em / 1em 3em

would be equivalent to:

   border-top-left-radius:2em 1em;
   border-top-right-radius:2em 3em;
   border-bottom-right-radius:2em 1em;
   border-bottom-left-radius:2em 3em


-- 
Anne van Kesteren
<http://annevankesteren.nl/>
<http://www.opera.com/>

Received on Wednesday, 21 November 2007 17:41:32 UTC