Idea : replacement for border-radius, a more complete corner styling property.

Hello,

Here is a small idea for CSS. I doesn't affect something important like 
selectors or positioning, it's only about decorating : it concerns 
border-radius. The problem with rounded corners, is that if it's 
currently a lot of used on the Web, and in print too, this is because 
it's trendy. For some years only. However, a trend is always temporary.

A language should, I think, transcend trends. I don't mean delete 
border-radius, no ! I use it a lot like many people. But I mean include 
it in a more global property related to border corner styling. Not only 
rounded. Something like "corner-style".

There could be two sub-property. The first in order to define the style 
applied to corner, like "corner-style-type". Quickly, I can see three 
different style for it : rounder corner (effect of the current 
border-radius), beleved corner, and corner "scoop out in square". A 
image is a better explanation :

http://web.nicosmos.free.fr/upload/tests/css/corner1.png

The second sub-property will allow to choose the size of these styles, 
with a "corner-style-size". Obviously, the same box could have different 
styles and sizes for each corner.

    div#various-corner {
      corner-style-type: rounded beveled square-cutted none;
      corner-style-size: 30px 20px 25px 0;
      }

should show something like this :

http://web.nicosmos.free.fr/upload/tests/css/corner2.png

The idea is to don't grant border-radius a complete property, but make 
of it only a possibility of an more overall property, in the same way 
that "double" is only a value of "border-style", or "square" is only an 
option of "list-style-type". Obviously, this property will be to improve 
: adding more corner style types and allow to write two values, x and y, 
for the same corner style, to do something like this for instance :

http://web.nicosmos.free.fr/upload/tests/css/corner3.png

(previous and next)

I know that it's only a detail not really important compared to all the 
other work in making CSS3, but I try ... Could you plan a property like 
this ?

Thanks for your potential answer,
Nicolas.

PS : As you have probably noticed, my English isn't awesome at all. Sorry ;)

Received on Wednesday, 5 August 2009 11:43:39 UTC