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


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  

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


   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

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