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>


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

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:13:23 UTC