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

An example of a use for border-radius-style would be if you wanted your box
to have dotted or dashed sides, but solid corners. Or perhaps solid sides
but doubled corners. And more to the point, it would keep the keyword
“-style” having the same purpose and accepting the same values throughout.
Having “border-radius-color” would likewise allow us to color the corners
separately from the sides. With “border-radius-shape: box-convex;”, those
could even take effect on otherwise ordinary-looking square-cornered boxes,
while the “border-radius” parameter itself would specify just how much of
the sides are included in the corners and thus affected by those styles and
colors.


Negative values for corner radii are hard to describe in text, but no, it's
not the same thing as “border-radius-shape: concave.” Basically, if a value
is negative, the algorithmic circle or ellipse is “flipped” along the box
border to be OUTSIDE of the box instead of INSIDE in the case of the
standard convex shape. Since the usual purpose would be if both horizontal
and vertical radii are specified separately, with only one being negative,
the effect would be that the corner curves OUTWARD, AWAY from the box, in
one direction.

Imagine a row of horizontal tabs sitting atop a large content box. When
selected, a tab is the same background color as the box, and its bottom
border disappears (becomes “border-bottom: none”), giving the impression of
the tab being physically part of the content box. But, at present, we could
only have the tab “rounded” at the top. Its sides would meet with the
content box top at hard right angles. Something like this:

#tab-bar .tab {
  background: beige;
  border: thin outset beige;
  border-bottom: none;
  border-radius-top-left: 5px;
  border-radius-top-right: 5px;
  ...
  }

#tab-bar .current { /* currently selected tab would have class="tab current"
*/
  background: white
  border: thin solid black;
  border-bottom: none;
  }

The idea here would be to simply add these two lines to the “#tab-bar .tab”
selector:

  border-radius-bottom-left: -3px / 3px;
  border-radius-bottom-right: -3px / 3px;

What this would do is create small bottom corners that are rounded around
invisible 3px-radius circles that now sit OUTSIDE the WIDTH of the tab
horizontally, but still INSIDE the HEIGHT of the tab. The rounding would be
visually concave, but still convex relative to the center of the circles.
The background of the box would be extended at the bottom to reach the new,
wider borders. The visual effect here is that the bottoms of the tabs are
physically joined to the top of the content box with nice, realistic curves.

I suppose I’ll need to draw a picture of this. No time right now, but when I
get a breather, I will.


-----Original Message-----
From: Brad Kemper [mailto:brad.kemper@gmail.com] 
Sent: Thursday, August 04, 2011 1:54 AM
To: Joel Rea
Cc: Jerome Leclanche; Brian Manthos; <www-style@w3.org>; François REMY;
fantasai
Subject: Re: Idea : replacement for border-radius, a more complete corner
styling property.

On Aug 3, 2011, at 8:29 PM, "Joel Rea" <joel@mmcc.com> wrote:

> First off, it’s “border-radius-SHAPE,” not “border-radius-STYLE.” The
latter would have an entirely different purpose, more in keeping with what
“border-style” does (“solid”, “double”, “dashed”, “dotted”, “inset”,
“outset”, “groove”, “ridge”, etc., applied individually or to all four
corner portions as specified in the relevant “border-radius” and shaped by
“border-radius-shape”).

Having separate border-styles for the corners does not sound very useful to
me. 

> Secondly, using a negative value has a different purpose.

What is it?

> “border-radius-shape: concave” is a specific border rounding shape. 

What you described for 'border-radius-shape: concave' sounds like what
negative values on border-radius should do (given the existing shape for
positive values). A transition from positive to negative could even be
animated smoothly.

Received on Wednesday, 31 August 2011 17:11:37 UTC