W3C home > Mailing lists > Public > www-style@w3.org > March 2013

Re: [css4-background] use cases for 'border-corner-shape'?

From: Lea Verou <lea@w3.org>
Date: Sun, 24 Mar 2013 23:14:09 +0200
Cc: www-style@w3.org
Message-Id: <DB05474B-3505-4BED-8DDC-588EA4646FE0@w3.org>
To: "L. David Baron" <dbaron@dbaron.org>
Googling these is pretty hard, as everybody uses different names to refer to them. Nevertheless, here are a few tutorials and questions from struggling authors about how to replicate these effects:

bevel
--------
http://stackoverflow.com/questions/6474168/how-do-i-make-corners-angled-like-this-using-css
http://stackoverflow.com/questions/10349867/how-do-i-bevel-the-corners-of-an-element
http://stackoverflow.com/questions/14093619/make-cut-off-corners-with-a-border
http://stackoverflow.com/questions/8854457/css-only-cross-browser-clipped-corners
http://stackoverflow.com/questions/9300692/how-to-make-a-rounded-corner-rectangle-with-a-cut-corner-using-css
http://stackoverflow.com/questions/2767150/how-to-give-transparent-hexagon-angle-at-the-last-li-only
http://stackoverflow.com/questions/8986545/css3-one-of-the-div-corners-should-inwards
http://stackoverflow.com/questions/7059597/slanted-corner-on-css-box
http://stackoverflow.com/questions/14418309/clipping-or-chamfering-corners-of-image-to-see-background
http://stackoverflow.com/questions/7324722/cut-corners-using-css
http://stackoverflow.com/questions/13545192/create-border-with-two-cut-off-corners
http://stackoverflow.com/questions/10196072/css-border-shape-how-to-cut-off-rectangle-right-upper-corner
http://stackoverflow.com/questions/11791947/styling-a-box-shadowed-element-with-cutoff
http://stackoverflow.com/questions/15148421/div-background-shadow-to-fit-custom-css-shape
http://stackoverflow.com/questions/13144470/css-cut-corner-on-all-four-edges
http://www.affiliates4u.com/forums/programming/43659-css-corner-cut-offs.html
http://www.red-team-design.com/css3-tabs-with-beveled-corners
http://www.wahnbriefe.net/web-design/css-cut-off-corners
http://inovex.ca/index.php/how-to-cut-corners-without-cutting-corners/
http://clubmate.fi/css-beveled-corners/

scoop
--------
http://stackoverflow.com/questions/12447865/create-concave-corners-in-css
http://stackoverflow.com/questions/11033615/inset-border-radius-with-css3
http://stackoverflow.com/questions/4012085/is-there-any-way-to-invert-a-rounded-corner-in-css
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-create-pure-css3-ticket-like-tags/
http://www.local-pc-guy.com/web-dev/border-radius-inset-or-inverted-rounded-corners
http://www.sitepoint.com/forums/showthread.php?659794-inverse-rounded-corners
https://forrst.com/posts/Inverted_Rounded_Corner_CSS-ubU
http://forums.phpfreaks.com/topic/251857-css-inverted-round-corners/
http://www.talkgraphics.com/showthread.php?37778-Inverted-Rounded-Corner-Rectangles-(Incut-Rectangles)
http://www.webreference.com/programming/css_borders/index.html
http://rajudasa.blogspot.gr/2009/10/rounded-corner-box-model-and.html

notch
--------
http://stackoverflow.com/questions/9997393/css-clip-corners
http://stackoverflow.com/questions/12683284/how-to-make-rounded-corner-cut-out-using-css
http://forums.mozillazine.org/viewtopic.php?f=25&t=2647553

Multiple
------------
http://jquery.malsup.com/corner/
http://www.cssplay.co.uk/boxes/krazy.html
http://battletech.hopto.org/html_tutorials/rounded_css_borders/more_styles.html
http://lists.w3.org/Archives/Public/www-style/2009Aug/0078.html
Also, read the comments here: http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

The response by the community on twitter to the app I posted today proves even more how badly this is needed.

If the above aren’t enough, I can find more. Especially for `bevel` the number of examples is overwhelming. Not to mention the degenerate use cases of triangles, hexagons, rhombii etc it could solve and the use cases all these wouldn’t solve completely, but would make much easier (e.g. folded corner effects, tucked corners etc).

No matter how much we believe this should be done with border-image, the reality is authors don’t want to use images (vector or not) if they can avoid it and will do all kinds of crazy hacks to avoid images, as demonstrated by several of the links above.


Lea Verou
W3C developer relations
http://w3.org/people/all#leahttp://lea.verou.me ✿ @leaverou






On Mar 24, 2013, at 21:14, L. David Baron wrote:

> http://dev.w3.org/csswg/css4-background/#border-corner-shape appears
> to me to be an example of a feature that's addressing a problem that
> we don't have -- or at least that we don't have enough to be worth
> adding such a feature.  I think it should be removed.
> 
> In particular, if there were demand for the bevel | curve | notch
> values, we'd be seeing authors using the equivalents of such values
> on significant numbers of Web sites.  So before agreeing to accept
> this new feature, I'd like to see examples of Web sites that are
> doing what these values would do.  Not something similar to what
> these values would do, but exactly what these values would do, or at
> least close enough that the author wouldn't care about the
> difference.
> 
> -David
> 
> -- 
> 𝄞   L. David Baron                         http://dbaron.org/   𝄂
> 𝄢   Mozilla                           http://www.mozilla.org/   𝄂
> 
Received on Sunday, 24 March 2013 21:14:30 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:07 GMT