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 CSS gradients once again. It’s amazing how many CSS problems can be solved with gradients alone. Read the text in the dabblet below 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+, Chrome, Safari, Opera 11.10+ and IE10+.

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)

    • Tab Atkins

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

  • 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.

      • 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.

  • Pingback: Some links for light reading (15/3/11) | Max Design

  • 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://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 :)

  • 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.

  • Pingback: CSS3 Gradient Fun: Stop Sign | Danni C. McNinch

  • Circle

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

  • Pingback: Powerful New CSS Techniques and Tools | redbey

  • Pingback: Discutons du border-radius et du css de demain. | Etudes / articles de fond

  • Pingback: Rounded Corners, with Borders, in Plain English | Cereal Larceny

  • Pingback: Powerful New CSS Techniques and Tools | Sejix Technologies Blog

  • Pingback: Powerful New CSS Techniques and Tools | Inspire Technologies

  • Pingback: CSS3 tabs with beveled corners – Red Team Design

  • Pingback: CSS3+jQuery制作切角的Tabs - 炫意 HTML5

  • Pingback: 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? :)

  • Pingback: CSS3 tabs with beveled corners | Web Help 101

  • Apps

    Cool work man…

  • Pingback: CSSだけで角をカット | ウダ2Blog

  • jaime marques

    I love you. 
    marry  with me. <3

  • http://twitter.com/TristanChaika Tristan Chaika

    Is it possible to use this technique while simulating a border, with no fill? – specifically the negative radius

  • Pingback: Border radius inset or inverted rounded corners

  • Biophantom

    Is it possible to have the background color a repeated gradient (i’m thinking the diagonal stripe pattern gradient…), rather than solid, and still bevel the corners?

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

      Yes, if what’s behind the element is a solid color. Then you just cover the corners.

  • Rich

    Wow that really great, thanks http://www.richtown.ae

  • http://www.facebook.com/bhaskerreddy.kottapally Bhasker Reddy Kottapally

    This does not seem to work in IE9. Any suggestions?

  • Pingback: Everyday Achievements

  • http://www.facebook.com/people/Joep-Klunhaar/1278656622 Joep Klunhaar

    Great technique! Only need one corner beveled in this case… How to only have the top right corner beveled?

  • Pingback: CSS3 tucked corners effect - RedTeamDesign

  • Pingback: CSS3 tucked corners « Kỹ Thuật Lập Trình ASP.NET

  • Casso

    Getting a white line down the middle of my final result… any ideas whats causing it?

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

      Change 50% to 51% in background-size.

      • http://www.facebook.com/SEAN.CASSO.CASSIDY Sean Cassidy

        Thanks a million!! Really great work

  • Pingback: 10+ Fresh CSS3-Only Tutorials (Look Ma, No Javascript!) | gonzoblog

  • http://www.facebook.com/cfrydlewicz Corry Frydlewicz

    Awesome! I’ve been looking for a non-image solution for this effect. Thanks!

  • Barun

    osum!!! boss. exactly this that i look for

  • Pingback: CSS3 tucked corners | IWebStuff

  • David Allgayer

    Wow, that’s genius!

  • hangu

    hello~~!

    it dosen’t work anymore…

    maybe, multiple linear-gradient will be deprecated…..

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

      The syntax has changed and some browsers have implemented the new one, without a prefix. No, there’s no chance of multiple backgrounds getting deprecated, we just have to include both syntaxes now (different syntax for unprefixed gradients than prefixed ones).

  • Lobjoie Thomas

    Hi Lea, thanks for this post. Do you know if there is a way to apply a shadow to this boxes? Thanks ;-)

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

      Sorry for the late reply. box-shadow won’t work here, unfortunately, but a drop-shadow filter will:

      -webkit-filter: drop-shadow(5px 5px 5px black);
      filter: drop-shadow(5px 5px 5px black);

  • jay

    not working..

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

      If you can’t be arsed to provide any details, I can’t be arsed to help.

  • Pingback: Three Methods for Creating Beveled Corners: CSS, CSS3 or jQuery | Scott Dawson

  • netyou

    Anything like this with transparency?

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

      Use a semi-transparent color?

      • netyou

        Sorry, what I meant was if I have a complex background this method would not work for me since I have to use the same color for the circles as I would for the background of my page, right?

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

          “Assumption is the mother of all fuck-ups”. I guess you didn’t read anything at all in the demo, right?
          Anyways, your comment made me realize the background of the page in the demo was broken, so I updated it, and the rest of the code, and moved it to dabblet.

        • netyou

          I actually read this when it came out (2011) and coming back to it I only noticed the grey background so yes I did “the mother of all fuck ups”. I see now what you mean.
          Thanks for taking the time, keep up your excellent work of improving the web :)

  • The Configurator

    I’m trying to understand why it needs to be done this way, and have a few questions:

    - Why are both linear-gradient and radial-gradient required? I’d expect it to be enough to have the radial-gradient.
    - Why is the linear-gradient in background, and the radial-gradient in background-image?

    - What are the background-size and background-repeat for?

    All that said, thanks very much for solving this problem for me!

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

      1. linear-gradient is for the beveled corners, radial-gradient for the scoop ones (“negative border-radius”).
      2. radial-gradient is overriding the first styles, as they are otherwise the same for both.
      3. background-size sets the size of each gradient to one quarter of the area (50% horizontally, 50% vertically). background-repeat cancels repeating (as it’s repeat by default) cause you only need one of each gradient.

      • The Configurator

        2. Hmm, but if I remove the linear-gradient in Chrome dev tools the inverted border radius one disappears as well.

        3. I get it now – because otherwise they’re painted on top of each other so the blank corner area gets filled with the other corner’s gradient.

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

          2. As you noticed, the first one uses background, because it defines multiple background-related properties, not just background-image. That’s how shorthands work. So, when you remove it, the other implicit definitions go away too (e.g. background-position). If you just want to use the inverted border-radius style, just replace the linear gradients with the radial gradients from the 2nd example.
          3. Correct.

        • The Configurator

          Thanks for the explanation.

  • Elisabeth

    This is great, but can I use a border around it too?