W3C home > Mailing lists > Public > www-style@w3.org > November 2007

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

From: Anne van Kesteren <annevk@opera.com>
Date: Wed, 21 Nov 2007 18:41:46 +0100
To: www-style@w3.org
Message-ID: <op.t15krwdh64w2qv@annevk-t60.oslo.opera.com>

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 GMT

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