border-corner-shape is in danger, and you can help!

Remember my previous post about an app I made to preview border-corner-shape? It stirred a lot of discussion in the CSS WG, and David Baron posted this:

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.

You can read the whole discussion in the thread I linked to, above.

I might be wrong, but I believe border-corner-shape would greatly simplify many common effects, especially its “bevel” value, which can even create triangles and other polygons, that we go to great lengths to make with CSS today, and it would degrade much more nicely than border-image or backgrounds. I think it was one of fantasai’s many great ideas and I’m glad she added it to the Editor’s Draft of Backgrounds & Borders 4.

I posted a list of tutorials and questions from web designers & developers, to illustrate that these effects are needed. However, David argued that “Questions from authors don’t give you enough information to be sure that the feature being added is sufficient for the author’s needs. He did have a point, so with some help from the community, I posted a few links to websites using such effects, and use cases. Nicole Sullivan, Liam Quinfantasai and Lev Solntsev posted a couple more.

However, the more real examples we have, the more likely it is to retain the feature in some form. This is where you come in: If you think border-corner-shape has merit, provide use cases, either by links to websites whose design elements it would simplify, screenshots of websites or descriptions of cases where you needed such a thing (in that order of preference). You can either post to the thread directly, or comment here and I’ll post them to the list in batches.

If you think it has merit but it could be improved, feel free to post about that as well. If you don’t think it’s a good idea, any alternatives you can think of are welcome as well. Or, if you don’t think it’s useful, say that too (but make sure you first fully understand what it can do). If you’re not sure how it can be used, play around with the demo app I made and be creative!

Below are a few examples of shapes:

bevel-1scoop-1notch-1 notch-2 scoop-2 bevel-4 bevel-3 bevel-2

I wanted to demo triangles and trapezoids as well, but it seems there’s a bug in my app, so I’ll have to debug it first :( If we allow border-corner-shape to have different values for all four corners, even more possibilites open (e.g. arrows).

Spend a few minutes to help the CSS WG help you. Thanks!

  • JoaoBeno

    I don’t have specific links, but i think this the right step in the direction of allowing designers to focus more on designing and less on learning how to hack css to do what they have in mind.

    How many times i saw designers sad over some of their ideas being “too hard to implement”, or designing some diselegant css to do the trick, or even doing the project in Adobe Flash just because it was easier.

    Now look a your example, and give me something diferent i could do to get the same result as easy, as fast and as optimized.

    Designers want to spend time drawing, not typing… Choose between this and other options is like choose between draw an wikipedia svg map in Illustrator/inkscape or in notepad. Go to wikipedia and see what people choose…

  • http://twitter.com/jordanpittman Jordan Pittman

    I don’t think I can give any websites for this type of thing but it could even be extremely useful in online magazine print-style design. We already have regions and exclusions in the works, this would be just another excellent addition that could make CSS much more powerful and give designers more variety in their designs.

  • maxw3st

    The only way to do this, without adding extra images (and their http requests) is to have the border-corner-shape method available in CSS. But, here’s one: http://www.victorinox.com/stories Notice the pixelated logo image in the header. This logo, and its shape could be created by layering CSS shapes using border-corner-shape. Advantage: a few lines of parsed CSS vs extra KB of image and the http request that goes with it. Why do so many web sites use simple rectangular and round-cornered backgrounds for logos now? Simple, because we don’t have CSS border-corner-shape as a standardized alternative.

    It’s kind of like asking “why invent the ball-point-pen, quill pens already let us write”?

    • http://lea.verou.me/ Lea Verou

      I agree on the main premise of your argument, but logos are not good examples, since SVG is far more appropriate for them…

      • maxw3st

        Yeah, I agree with that, but, logos could also be made with CSS this way as well. It was more about picking out that shield shape as a demo of the kind of shapes that border-corner would allow. When combined with before:, after: and other techniques for layering it greatly expands the graphic capabilities of CSS. That’s what I’m after. Graphics defined by CSS mean less http requests, and less loading time for a site. It also gives you elements that are more easily manipulated with CSS animation.

    • http://twitter.com/ruGreLI GreLI

      Actually, you can make many of these in a hacky way using pseudo-elements and transformations like rotation and skew. Like Yandex did in my example under the “Lev Solntsev” link (that’s my name).

      • maxw3st

        You shouldn’t have to resort to those hacky ways just to get a notch on a rectangle though. If you can control the corner shapes, then you can use those hack techniques to create more complex designs. The basic idea being that we need more capability when it comes to creating shapes in CSS, not less.

        • http://twitter.com/ruGreLI GreLI

          Personally, I believe that more needed modules like layout should be prioritized. But this is ok for level 4 CSS as well (i.e. somewhere in the future) just to avoid ugly hacks.

  • http://twitter.com/johnholtripley john holt ripley

    When we were building http://www.nerfalliance.com/ we looked into a number of possible solutions for exactly this. It’s a key part of the brand and had to be included. We ended up with a large number of fixed width images which added http requests and to load time, and also meant that the site couldn’t be fully responsive. border-corner-shape would have been perfect for this site, and I’d be very disappointed to have this capability be discounted so quickly.

  • http://twitter.com/padolsey James Padolsey
    • http://lea.verou.me/ Lea Verou

      This is pure gold James, thanks! Although some of them can’t be done with border-corner-shape (e.g. the rounded hexagons), most would be at least simplified with it.

  • http://twitter.com/nzinas Nikos Zinas

    On another note, I really like the whole point behind David Baron’s post. Before agreeing on a feature, make sure that it solves a real world problem and not just adding it because it is cool.

    But yes, I agree that in this specific case, it’s a feature that we need.

  • Stefan Insam

    I gathered a bunch of screenshots of stuff that would be achievable with border-corner-shape. Didn’t have time to properly lay them out, so they’re all scaled down, sorry.. but I think you can still see the details (you can also find it here: https://dl.dropbox.com/u/21513714/border.png).

    other ideas that I had include navigation arrows in a cross (like google maps), curtains openining (or rips appearing) for images in a gallery, simple page-flipping starting from a corner, the possibility to make rounded tabs that “grow out” of the panel, tabs in general, Gameboards (like Settlers of Catan), etc..

    • http://lea.verou.me/ Lea Verou

      Thanks for all these examples. Many, if not most, wouldn’t be possible with border-corner-shape, but some of them would.

      • Stefan Insam

        Not with just border-corner-shape, but combining it with negative margins, and pseudo-elements nearly all of them should be possible (except maybe the jagged edges)

    • Thurstan Hethorn

      Id say you should look into SVG. Now that all modern browsers support it.

  • toh

    It could be used to create icons.

    • http://lea.verou.me/ Lea Verou

      SVG would be far more appropriate for this. Also, this shape cannot be constructed with border-corner-shape, unless you layer multiple elements.

      • Shahbaz Ahmed Bhatti

        dear lea i need som ehelp in css can u please guide me

  • http://damianvila.com Dmian

    Well, starting with the fact that this is one of those cases were you would normally have to use jQuery Corner to achieve the same effect: http://www.malsup.com/jquery/corner/

    But also, pretty much any modern breadcrumb bar would benefit from the last example (bevel) you posted.

    AND I would refrain from the temptation to write an ad-hominem to this guy, specially after seeying his site (I would love to see them demonstrating more humility towards designer, whom they clearly don’t understand).

    • http://lea.verou.me/ Lea Verou

      Thanks for the example!
      Btw, David Baron might not be a designer by any means, but he’s one of the best Gecko developers out there and one of the most active CSS WG members. Don’t be quick to discount him, it would be unfair :)

      • http://damianvila.com Dmian

        Not at all! I guess he’s one hell of a developer. But I’ve seen quite a lot great developers who have no grasp of what we designers need. It’s pretty sad for us, and the main reason why designers don’t feel attracted to some dev driven projects (like what happened to GIMP in the past).

      • http://damianvila.com Dmian

        To make myself clear: he asks why we need this. My point: because we need tools!
        Why you need yet another browser rendering engine? I see no need for Gecko. I’m pretty happy with Webkit. Just drop Gecko altogether!
        Having more than one rendering engine is a solution to a problem we don’t have, right?
        Is there a demand for more rendering engines? Give examples of people demanding more than one rendering engine…
        :P
        (I guess you get the point).

  • http://twitter.com/k_bav Kyle Bavender

    Hi Lea,

    When I saw your link & played around with the demos yesterday I got super excited because a half year ago or so I threw together a music site for a friend, using “scoop”ed corners in the design.

    See the attached thumbnail, or see the site itself at http://joepaulsonmusic.com/ — at the time of writing this is the design.

    Really hope this gets some further consideration…I strongly disagree with David Baron that this is a “problem we do not have”. If anything, it’s a problem we are unaware that we do have. I’m hoping to redesign my personal site soon, and I’m going for a look that could really, really use “border-corner-shape: bevel”.

    Edit: Gah, sorry, I didn’t mean for this thumbnail to be this tall.

  • http://twitter.com/cccc00 o.O

    Blizzards battle.net

    • http://www.alfystudio.com Ahmad Alfy

      Kudos for Jim Raynor!

  • http://twitter.com/bennettfeely Bennett Feely

    Will it be possible to transition/animate between different border-corner-shapes?

    • http://lea.verou.me/ Lea Verou

      No, for something to be animatable, it should be possible to represent all intermediate states in CSS. For example, you can’t represent a corner that’s 50% bevel and 50% curve in CSS, at least with the current design of the feature.

      • http://twitter.com/bennettfeely Bennett Feely

        Makes sense. Thanks!

  • Pingback: Authored Content, Episode 11: Google+ Hangouts, noUI, IE11, April Fools and more | Nuixen Technology

  • Ben

    Another example, which has been looking like this for a couple of years already: http://www.fuenfbisneun.de/

  • http://twitter.com/ruGreLI GreLI

    The Huffington Post (Alexa Top 100):

  • http://twitter.com/ruGreLI GreLI

    Vimeo (using PNG for this):

  • http://twitter.com/ruGreLI GreLI

    There also a lot of arrows of all kinds. The one notable example is a back arrow on iPhone UI. We can apps with HTML, so it’s an important one. Other examples:

  • http://twitter.com/kizmarh Roman Komarov

    Actually, if you’d go by any large portfolio of almost any design studio, you could find something a lot of examples where the border-corner-shape could be used (or, at least, make thing so much easier)

    The most often example is arrows of any kind. Right now there are a lot of hacks and tricks to make them work, but if you’d need one with gradient, border and box-shadows — it would become really cumbersome to emulate.

    Here are some examples of such arrows:

    https://dl.dropbox.com/u/1077344/Screenshots/katushkin.png (http://katushkin.ru/encyclopedia/ts/bikes/)

    https://dl.dropbox.com/u/1077344/Screenshots/yandexcom.png (http://www.yandex.com)

    https://dl.dropbox.com/u/1077344/Screenshots/auto.png (http://auto2.yandex.ru)

    https://dl.dropbox.com/u/1077344/Screenshots/apple-store.png (http://store.apple.com/us)

    https://dl.dropbox.com/u/1077344/Screenshots/branded2.png (http://branded.ru)

    https://dl.dropbox.com/u/1077344/Screenshots/branded-3.png (http://branded.ru/jce/news/7069-apple-vypustila-novuyu-ios)

    As we can see, such arrows often used in breadcrumbs, in buttons or different kinds of promo-blocks.

    There could be more use-cases for beveled corners, like this:

    https://dl.dropbox.com/u/1077344/Screenshots/branded.png (http://branded.ru)

    With beveled corners I could do this ribbon on one element, without pseudos (bevel, 0 0 15px 15px, fill the top part with one black-black gradient, corners with gray ones)

    Another thing are negative border-radiuses near tabs. Yes, with the current spec they couldn’t be done with border-corner-shape alone, but — come on! — it would make things a lot easier, so you could use pseudo-elements with clear code for them instead of ugly hacks with box-shadows, clip etc. Actually, with corner-shape you could use gradients and images there, that is not possible right now without proper masking.

    https://dl.dropbox.com/u/1077344/Screenshots/apple-store2.png (http://store.apple.com/us/browse/home/shop_mac/family/imac)

    https://dl.dropbox.com/u/1077344/Screenshots/kartagen.png (http://kartagen.ru)

    And, well, the hexes are becoming more usual:

    https://dl.dropbox.com/u/1077344/Screenshots/mono.png (http://monographic.ru/portfolio/)

    – – –

    Also. A lot of web-designers today design with CSS actually. And as they don’t have those tools of border-corner-shape, they need to limit themselves when they need to do something unusual — they often want to use only things that could be made by CSS, and not by hacks. So, it’s a bit of a chicken-egg problem — until there won’t be a plain way to use this stuff, people wouldn’t be use it often.

  • Bryce Howitson

    My company gives potential design/FED talent a test of converting a PSD into HTML. Overall its a pretty simple test but we’ve peppered the file with tiny gotchas that replicate things traditional designers tend to include in their designs (without understanding the tech implications). One of those things is a notched edge on the bottom of the sub-nav. In addition to the notched area the design specifies transparency, border, drop shadow and hover color. We add the requirements that the area in question is dynamic and should be able to accommodate several lines of text. Clever use of background images can solve the requirements ( http://brycehowitson.com/htmltest ) but its not a great solution and won’t work if the width of the element needs to change. It seems like this is a perfect use for border-corner-shape and I’d love to give a potential FED extra points for being able to use it.

  • zzzzbov

    A quick google search of “iPhone back button” will give you a large quantity of images, some of which are from mobile websites which are trying to copy the look and feel of native iPhone apps.

  • Pablo Botta

    HTML5Please would use it to simplified theirs arrows

    http://html5please.com/

  • qwe

    Maybe SVG path@d?

    • qwe

      …for something like that

  • http://twitter.com/willmorgan Will Morgan

    Compromise: you use the shape property value for the border radius. By no means ideal but it would essentially turn in to shorthand, which is never a bad thing.

  • http://www.mathewporter.co.uk/ Matt Porter

    Some of these css developments could help us turn the web back to the 90’s with sites full of crap effects, but hopefully as they seem to have so far, keep things moving forward and help us in the now ‘multi device’ world we live in.

    • http://twitter.com/nathggns Nathaniel Higgins

      It is not CSS’s job to only have features that can make things look good. It is, however, CSS’s job to support a developer in creating any kind of design, despite the fact it may look like “the web in the 90’s”.

      • http://www.mathewporter.co.uk/ Matt Porter

        I wasnt having a pop at the css spec for having elements that make things better for the web…

  • http://23x.org/ Rob

    I used to use a jquery solution years ago to accomplish the same thing and it was one bloated library.

  • http://www.darklightdusk.nl Luuk Lamers

    I have been looking for that triangle shaped corner for years. It would be awful if this doesn’t get pushed into the official recommendation!

    With different values you could even create interconnecting elements like in breadcrumb paths where the first and last element have a rounded border and everything in between has bevels, notches or scoops.

  • http://www.darklightdusk.nl Luuk Lamers

    This would also greatly increase pure-css icon possibilities.

    • Thurstan Hethorn

      If you like pure-css for the tag based description or crispness you should check out SVG.

  • http://www.darklightdusk.nl Luuk Lamers

    Something else I found, which might? be done in pure css in the future: http://jquery.malsup.com/corner/

  • Robert Alan Yeatts Jr.

    Thanks for such a helpful post! I learn a lot from reading your posts everyday!

  • Pingback: With 100 points of possible failure — Authored Content Episode 11View Source | View Source

  • http://www.yepi250.com/ yepi250

    This article has got some really helpful info on it. Thank you for sharing it with me!

  • http://friv-10.y8u.org/ Friv 10

    but this caught my attention as soon as I read the first sentence. Thank you so much.

  • http://friv-10.y8u.org/ Friv 10

    I have a hard time reading some articles, mostly because they’re dull.

  • whatnaut

    Here is another one:

    http://de.battlestar-galactica.bigpoint.de/

    I’d predict there a lot of sites related to video games are have an huge demand for such functionality. I try to dig out some more

  • http://www.friv3.co/ friv 3

    If I had more time to learn things more carefully what you write here.

  • david peach

    The pseudo element trick with a rotated box / inverted borders to create the speech bubble effect. It would greatly simplify that and cut down on the extra css.

  • Christoph

    I incidentally designed a webpage about 2 years ago where this kind of CSS would have made it a lot easier. Since it didn’t/doesn’t exist, it uses images: http://www.rae-aschaffenburg.de
    (I expected a negative border radius to create this effect, though back then…)

  • Crispen Smith

    I think the key thing here is that unless I’m mistaken, scaling SVGs is a non-trivial process for most CSS authors whereas scaling DIVS is a very natural idea. In trying to implement one of the SVGs taken from the preview tool I’m experiencing a pain point with setting it up so that it’s media-query friendly. Having the option of just describing the div cleanly would be perfect in all cases where a call to action, sub-title or other key image & Text linkage needs to scale to capture attention on distinct devices widths.

  • http://www.minecraftgames.co/ Minecraft Games

    We can do it.

  • http://heliosstudio.ca/ Paul d’Aoust

    I’m going to add my support — if I had had border-corner-shape when I was designing the pager at the top of http://techchoiceparts.com/inventory I would’ve been much happier. Working with border widths seems like such an ugly hack, and as someone on the CSS mailing list said, it makes the target area all wrong.

    I might add support for some sort of fins too — something like fin-horizontal, fin-vertical, and (for those who like quilting) fins. I’ve included examples of each in my comment. This would allow you to do those lovely bookmark shapes, or (in my link above) an arrow on one side and fins on the other.

    A possible criticism of my suggestion: where do the fins go? Do they poke outside of the box (image 4)? If so, then it’s different from other border-corner-shapes and that’s an issue that might have to be addressed. If they cut into the box, then that’s weird too, because unless your border-radius is 50%, they get cut out, and then the box pokes out as soon as the shape is finished notching (image 5).

    In a bout of insomnia last night I thought it might even be a neat idea to be able to specify a curve, for defining your own shapes.

  • Ramsey

    I have been a big fan of this effect for years but have had to result in clunky multiple divs with background images applied to create the effect. And forget about using anything where a body background shows through. I want this support added and will share this a few times on Twitter & Facebook. Good luck!

  • Jackin

    Well, I am not a designer or something like these jobs but I really work with CSS, HTML and all this languages, teaching the people how to do something, helping and even, sometimes, they help me in a spanish website. There, we have some examples of things that are possible to do with CSS, with ::before, ::after, hacks (at least they seem as if they are, I think XD) and stuff like this. But it needs a lot of effort, since it is difficult to understand (for “normal” people, who doesn’t know a lot about computers).

    You can have some examples in the next pages (not all would be done with the border-corner-shape, but at least, some of them).

    http://css-tricks.com/examples/ShapesOfCSS/

    http://vagabundia.blogspot.com/2009/01/8-tcnicas-para-crear-esquinas-con-css.html
    As you see in the last one, to make the special corners you need extra elements and a lot of CSS. With this property you would be able to do them, and even adding to them real borders, background-images and so on.

    Finally, I think that, if there aren’t a lot of examples on the internet, it’s because it is quite difficult to do it, and people sometimes simply give up.

    Yes, I know, my English is simply awful, but I do it as well as I can :)

  • goldgin
  • TweetsOfSumit

    OMG ADD IT! I hate to use images (lots of em) to create a flexible button with effects like this…

  • CockpitSeeker

    Threads did pop up reflecting the need for this attribute, e.g:

    http://stackoverflow.com/questions/10196072/css-border-shape-how-to-cut-off-rectangle-right-upper-corner

    not to mention its duplicate…

  • http://www.friv2friv3friv4.com/ friv 2 friv 3 friv 4

    If I had more time to learn things more carefully what you write here

  • Pingback: آپارنت | Border Corner Shape در CSS3

  • Desolo SubHumus

    I’ve always wanted to be able to create divs that were more interesting than the dual choices of the old rectangle/square and the newer rounded corners, however I am not interested in writing massive blocks of SVG coding or hand-drawing SVGs in an SVG editor (which buying one would be yet another extra expense for a temporary fix). I’d LOVE to see a border-corner-shape implementation in the next iteration of HTML, but I just can’t justify buying software or adding so many lines to my current codes for a simple shape change.

  • Abdelwahab Bounasser

    that blockquote!

  • http://www.friv2friv4.com/ friv 2

    best to follow the spiral

  • 一丝

    Hi:
    There is no better way to achieve the diagonal?

    GIF:http://ww4.sinaimg.cn/large/c1608aa0gw1ea1y5i2q91g20bk0acgpi.gif

  • Hiljá

    I made a set of Sass mixins to do beveled corners. Works down to IE8 http://clubmate.fi/css-beveled-corners-take-2-a-sass-mixin/

  • StephenFirthUK

    To me this highlights a lack of imagination in the whole border stuff because, hey, I want border-corner-shape: chimp-holding-a-trophy; Surely we can come up with a better solution than this rather limiting proposal?

    • http://lea.verou.me/ Lea Verou

      I hope so! Any ideas?

      • StephenFirthUK

        Actually, having done a little research, it turns out there is already

  • http://www.frivjogo.info/ Friv Jogos

    We can and that is what we recognize that, in the possibilities and limits of his.

  • Pingback: Border Corner Shape در CSS3 | آمیار

  • Pingback: Ep11: With 100 points of possible failure | Authored Content

  • Pingback: ADVidea comunicazione | cut off

  • http://laukstein.com/ Binyamin

    Corner Shaping proposed as “corner-shape” property in http://dev.w3.org/csswg/css-backgrounds-4/#propdef-corner-shape

  • http://tamingclients.com/ Martin Muzatko

    http://clientsfromhell.net/ is using this kind of effect for their buttons. It’s an inset bevel effect on the sides. example -> http://clientsfromhell.net/post/58617788738/client-lets-get-more-content-published-before

  • Rebecca Trynes

    I came here for the hexagon, so yes – definitely add it!

  • HashemQolami

    Hi Lea,
    I just found that the link to the github page is broken. Could you please update the URL address? Thank you.

    • http://lea.verou.me/ Lea Verou

      Done, thanks!

      • HashemQolami

        Wow, so fast! :-) I wish guys @ github consider a way for redirecting old URLs to the new ones.

  • Bane

    This is awesome, WHY would anyone be against it?!