I would like to see “-webkit-border-radius-style:” — this could take parameters such as “convex” (default), “concave”, “flat” (or perhaps “beveled” or “angled” for the same effect), and “cutout” (as well as standard CSS keywords such as “inherit”).

“convex”, the default, means a convex rounded corner, rounded away from the center of the block node.

“concave” would be rounded towards the center. Imagine the corners of an old-fashioned photographic print.

“flat” / “beveled” / “angled” isn’t rounded at all, but instead renders a straight diagonal. If the X and Y size of the radius are the same (as is the case if only one radius is specified instead of two), then the angle would be 45°. But just as elliptical rounded corners can be done in CSS3 Borders and Webkit (but not Gecko, let alone Presto [Opera] nor Trident [WinIE] at present) by specifying two separate radius values per corner (one for X and one for Y), using this would allow any desired angle to be specified.

“cutout” (or perhaps “inset”) would be a square (or rectangular) inset.

Also, if X and Y radii are specified separately (on a per-corner basis), then either (but not both) should also be allowed to be negative. If negative, then the corner would be reversed in that dimension (in effect, the corner radius ellipse would be outside the box instead of inside). For example, if the X radius of the bottom two corners of a box were negative but its Y were positive, while both X and Y were positive for the top two corners, and the default “convex” style were used then the resulting box would be shaped like a file-folder tab. Instant tabbed navigation bar, without graphic files of any kind (not even SVG)!

a.navtab {
height: 18px;
border: 1px outset #color;
border-bottom: 0;
-webkit-border-top-left-radius: 9px;
-webkit-border-top-right-radius: 9px;
-webkit-border-bottom-left-radius: -4px 4px;
-webkit-border-bottom-right-radius: -4px 4px;
}

Using just these two enhancements, a very wide variety of box shapes could be done without using graphics. Want an octagon (perhaps for a “STOP” sign)?

div.stopsign {
background-color: #900;
-webkit-outline: solid medium white;
border: solid medium #900;
color: white;
height: 100px;
width: 100px;
-webkit-border-radius: 25px;
-webkit-border-radius-style: flat;
}

Want a diamond? A hexagon? Not much different: just change the radii!

That old-fashioned photographic print I referred to earlier?

img.borderedPhoto {
border: solid thick white;
-webkit-border-radius: 10px;
-webkit-border-radius-style: concave;
}

And that’s not even getting into the really cool effects that could be done with independent per-corner border radius styles!

My other idea is even more powerful than this.

That makes sense. Thanks for the explanation.

What I’m looking for is a matrix of all -webkit CSS additions and in what version of *shipping* products they appear. This is more of an Apple & friends thing than a Webkit thing, but suddenly we have Safari, MobileSafari, OmniWeb, Adobe Air, and (soon) Android, all with different versions of WebKit. We need to get all of this information down.

So… this is frickin’ COOL!

Right now the current values of background-clip are border, padding and content. Therefore at a minimum the mask is going to clip out everything outside the border (since it takes the same values). There really needs to be a new value for mask-clip that lets you specify that nothing should be clipped out initially. That’s basically the problem you’re running into with the shadow vanishing once you apply a mask.

As for images not respecting border-radius, they shouldn’t if overflow is visible, since the portions of the image that stick out of the border box are overflowing, and so clipping that in the visible case would be wrong. However, clipping the foreground content to the border radius when overflow is hidden is (I believe) a reasonable thing to do. We have a bug filed on that.

In general, you can think of these as shortcuts to avoid the need for an external SVG file to achieve simple presentational effects like gradients and image masks in CSS. Masks are a bit of a special case, because SVG has confusingly weird semantics for “mask”. Most masking operations use either only a grayscale color channel or only the color channel. SVG’s masks convert RGB color channels to luminosity (using a different coefficient for each color channel) and then multiply by the alpha to get the final alpha mask. This is confusing and usually not what you want.

I do think allowing SVG styling properties on any element is a neat idea, but I don’t think it is a substitute for making the simple cases easy.

One problem seems to be that if -webkit-box-shadow is specified, it won’t render if you’re using masks… Is this by design?

Another question is about consistency of -webkit-border-radius application. Images don’t respect it, but -webkit-box-shadow (on an image) and -webkit-mask-image do respect it. Any chance this could be harmonised, one way or the other?