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

Brad Kemper <brad.kemper <at> gmail.com> writes:

> 
> I think something like this is also significantly less necessary once you have
border-radius and background-clip (border-radius to create the corner shapes and
flat sides, and background-clip to keep the background confined to the padding
box).[1]
> 
> On Aug 5, 2009, at 7:32 AM, François REMY wrote:
>   Thanks for your suggestion.   It would be a nice to have, but I don't think
any implementor would like to have this included in the spec. We currently have
a nearly compatible solution about border-radius, nobody shall delete it from
the spec in favor of an hypotetical replacement.   Maybe such features may be
implemented in a later version of CSS by introducting the use of a keyword in
the border-radius property.       selector {         border-radius: 10px
beleved;     }   Please note that I'm not a browser implemetor, and anything I
could say  here is only speculative and only reflects my own thoughts.  
Regards, F. Remy    From: <a title="mailto:contact <at> nicosmos.net
> CTRL + Cliquez ici pour suivre le lien" href="mailto:contact <at>
nicosmos.net">Nicosmos  Sent: Tuesday, August 04, 2009 8:32 PM To: www-style
<at> w3.org  Subject: 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 :
> <mime-attachment.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 :
> <mime-attachment.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 :
> <mime-attachment.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 ;)
> 
> 
> [1] http://dev.w3.org/csswg/css3-background/
> 

I actually had a very similar idea some time ago. Same CSS attribute name, even:
“border-radius-shape” (to distinguish from “border-radius-style” which would
have a different purpose entirely). I did have an extra possible shape, and
different keywords for selecting them:

• “convex” (same as François’s “rounded” and would be the CSS default, plus
fallback for browsers that don’t support this but do support “border-radius”)

• “concave” (my unique one that has no equivalent in François’s proposal:
rounded, but cut INTO the box corners, like the corners of old-fashioned
photographs, ticket stubs, etc. — sort of like his “square-cutted,” but rounded
instead of square)

• “angled” (or perhaps “diagonal” — same as his “beveled” — box is cut along the
diagonal specified by the radius)

• “convex-box” (this would normally be invisible, the same as if no
border-radius were specified at all, but does have a use when combined with
“border-radius-style”)

• “concave-box” (same as his “square-cutted”)

A variety of effects could be produced this way. For instance, a USA “Stop” sign
(octagon) could be styled as follows:

#stopsign {
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  background: darkred;
  border: 10px double white;
  color: white;
  font-family: Impact, sans-serif;
  font-size: 50px;
  text-align: center;
  border-radius: 25%;
  border-radius-shape: angled;
}

<div id="stopsign">STOP</div>

Some other ideas that would complement this include: allowing negative values
for border-radius (this would make little sense normally, but when used with
elliptical radii, making one or the other value negative could have really cool
possibilities, e.g. the ability to make nice-looking “tabs” entirely in CSS!),
and “border-radius-style” (allowing the corners specified by border-radius to be
styled differently from the top, right, bottom, and/or left of the box border:
value keywords are the same as for “border-style”, “border-top-style,” etc., and
include “solid”, “dashed”, “dotted”, “double”, “inset”, “outset”, “ridge”, etc.
— this is what could make “border-radius-shape: convex-box” visually useful).

Received on Tuesday, 2 August 2011 09:06:52 UTC