Beveled corners & negative border-radius with CSS3 gradients

Posted on by Lea Verou

Just found out how to do beveled corners and simulate negative border radius without images, by utilizing CSS3 gradients once again. It’s amazing how many CSS problems can be solved with gradients alone. Read the text in the fiddle to find out how (or just check the code):

It also falls back to a solid color background if CSS gradients are not supported. It will work on Firefox 3.6, latest Webkit and —hopefully— Opera 11.10 (they announced that gradients support is coming). You could add a -webkit-gradient() background too, to make it work in practically all versions of Webkit currently in use, but I warn you: It’s not going to be easy and I personally refuse to spend more than 5 minutes of my time messing with that non-standard sh*t.

PS: For my twitter friends, I had already written this when the robbers came and I was about to post it. I might have been really calm, but not as much as making CSS experiments the same day I was robbed and threatened by a gun :P

  • http://twitter.com/jasonneel Jason Neel

    This is an awesome awesome trick. I love finding out things like this, something I would have never considered possible with just straight up CSS. Nice technique!

  • http://twitter.com/czarodziejmarx Mark Gubiec

    Based on your example above, the specs of CSS3 should be modified to allow negative radius. But I guess it’s too late, it’s Candidate Recommendation, isn’t it? (B&B Module)

  • http://mindmeld.ws/ Les Stroud

    Interesting. Does not work on iOS mobile safari. Actually, doesn’t seem to work in safari at all. Works in Chrome. Do other browsers support it?

  • http://myfreeweb.ru/ MyFreeWeb

    “You could add a -webkit-gradient() background too, to make it work in practically all versions of Webkit currently in use, but I warn you: It’s not going to be easy and I personally refuse to spend more than 5 minutes of my time messing with that non-standard sh*t.”

    Read posts better next time.

  • Tab Atkins

    More powerful border-radius controls will come in B&B 4, don’t worry. (CSSWG member here)

  • http://mindmeld.ws/ Les Stroud

    :) I thought the browser prefix for non-ratified tags was the standard. Since it is still a working draft, isn’t the prefix what the browsers are supposed to implement at this stage?

  • http://leaverou.me Lea Verou

    It does work in the latest Safari (Webkit nightlies) and Chrome. Eventually changes will propagate to Safari too. -webkit-gradient is nonstandard syntax, the standard one is -webkit-linear-gradient/-webkit-radial-gradient

  • http://mindmeld.ws/ Les Stroud

    Thanx, I didn’t catch that difference. I thought they were referring to the -webkit part. My bad.

  • http://www.maxdesign.com.au/2011/03/15/some-links-319/ Some links for light reading (15/3/11) | Max Design

    [...] Beveled corners and negative border-radius with CSS3 gradients [...]

  • Anonymous

    Glad you’re OK!

  • http://rolling-webdesign.com Theo

    Clever and nice idea and Glad you’re well!

  • http://www.netslug.org Nicholas Sack

    Very cool post. I just now started converting my blog over to some new CSS3 techniques. This will definitely come in handy at some point I’m sure.

  • AdvertisingAgency

    Great stuff! Thanks!

  • Steve

    Why doesn’t this work on my iPad?

  • Steve

    Why doesn’t this work on my iPad?

  • http://leaverou.me Lea Verou

    Probably because the new gradient syntax hasn’t propagated yet to Mobile Safari.

  • http://pulse.yahoo.com/_WERDBLOT3MYWKN75AHWLHNOQX4 Nica

    I’ll try it. Sound good.
    As for the “non-standard” webkit gradient implementation… It’s the only one that impements the “standard” W3C proposal. It’s a mess, and the Mozilla (and now Opera) approach is far better and simpler.

  • http://leaverou.me Lea Verou

    What the eff are you talking about? Have you even looked at the spec? http://www.w3.org/TR/css3-images/

  • http://dannich.com/css3-gradient-fun-stop-sign/ CSS3 Gradient Fun: Stop Sign | Danni C. McNinch

    [...] about the basics of how gradients are done. Then today I’ve found Lea Verou’s “Beveled corners & negative border-radius with CSS3 gradients.” I’m very amazed by how intelligently she utilized CSS3 Gradients to make cut-off [...]

  • http://twitter.com/grafikero Omahr Carpinteyro

    I’ve tried in my safari on my mac and it doesn’t work either

  • http://leaverou.me Lea Verou

    Try the nightlies, it definitely works there :)

  • Circle

    hmm… nice work, although the circle corners look very ugly.

  • http://redbey.com/?p=290 Powerful New CSS Techniques and Tools | redbey

    [...] Beveled Corners Negative Border-Radius with CSS3 GradientsBeveled corners and simulate negative border radius without images, by utilizing CSS3 gradients once again — Lea Verou is amazed by how many CSS problems can be solved with gradients alone. Work on Firefox 3.6+, latest Webkit Nightly buildss and Opera 11.10. [...]

  • http://www.smartit.fr/etude/lavenir-du-border-radius Discutons du border-radius et du css de demain. | Etudes / articles de fond

    [...] que c’était possible d’une façon un peu sale en utilisant linear-gradient (ex ici : http://leaverou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/ [...]

  • http://patrickcason.com/blog/2011/07/02/rounded-corners-with-borders-in-plain-english/ Rounded Corners, with Borders, in Plain English | Cereal Larceny

    [...] any inward curves, beveling, bite effects, etc.  There have been marvelous attempts at this from outlandishly crazy methods such as using radial-gradients (which are a huge difficulty in Safari and Chrome, not supported in every version of Opera, and [...]

  • http://sejix.com/blog/design/powerful-new-css-techniques-and-tools/ Powerful New CSS Techniques and Tools | Sejix Technologies Blog

    [...] Beveled Corners & Negative Border-Radius with CSS3 Gradients Beveled corners and simulate negative border radius without images, by utilizing CSS3 gradients once again — Lea Verou is amazed by how many CSS problems can be solved with gradients alone. Works on Firefox 3.6+, latest Webkit Nightly builds, Chrome and Opera 11.10. [...]

  • http://www.inspiretechs.com/blog/?p=312 Powerful New CSS Techniques and Tools | Inspire Technologies

    [...] Beveled Corners & Negative Border-Radius with CSS3 Gradients Beveled corners and simulate negative border radius without images, by utilizing CSS3 gradients once again — Lea Verou is amazed by how many CSS problems can be solved with gradients alone. Works on Firefox 3.6+, latest Webkit Nightly builds, Chrome and Opera 11.10. [...]

  • http://www.red-team-design.com/css3-tabs-with-beveled-corners CSS3 tabs with beveled corners – Red Team Design

    [...] while ago I read this wonderful article by Lea Verou about how to create beveled corners using CSS3 gradients. I found [...]

  • http://www.xyhtml5.com/css3-jquery-making-beveled-corners-tabs.html CSS3+jQuery制作切角的Tabs – 炫意 HTML5

    [...] Verou写的《Beveled corners & negative border-radius with CSS3 gradients》一文，不过我建议自己动手，才有收获，而且Lea [...]

  • http://www.crackedhorizon.co.za/2011/10/massive-web-development-roundup/ Massive Web Development Roundup | crackedhorizon
  • Ryan O’Hara

    Good idea, I never thought that was possible… how about putting them outside the box? Is that possible? :)

  • http://webhelp101.com/2011/10/23/css3-tabs-with-beveled-corners/ CSS3 tabs with beveled corners | Web Help 101

    [...] while ago I read this wonderful article by Lea Verou about how to create beveled corners using CSS3 gradients. I found [...]

  • Apps

    Cool work man…

  • http://uda2.com/blog/2012/02/ccc/ CSSだけで角をカット | ウダ2Blog

    [...] 画像を使わずCSSだけで角が欠けた表現をする方法がBeveled corners & negative border-radius with CSS3 gradients | Lea Verouに書かれていた。角丸の表現も飽きてきてたので新鮮だったが、CSSの量が多く（ベンタープレフィックスの為だけど・・・）面倒なのでジェネレーターを作ってみた。 「Css3 Corner Cutter」 [...]