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 😛

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

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

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

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

      • 🙂 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?

        • 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

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

  • Clever and nice idea and Glad you’re well!

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

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

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

        • Try the nightlies, it definitely works there 🙂

  • 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

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

    • 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

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

  • Pingback: Everyday Achievements()

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

    • Mohamed Shokry

      transparent 10px,
      change the values to change the amount of transparent

    • Saum

      Change
      div.round {
      background-image:
      radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
      radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
      radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
      radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
      }
      TO
      div.round {
      background-image:
      radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
      }

      • Saum

        Whoops, supposed to be linear-gradient not radial-gradient.

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

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

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

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

    • 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);

      • If we want to make it only with border radius not with background, do you know how it possible?

  • jay

    not working..

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

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

        • “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!

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

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

  • Pingback: REDSTAR — Бесплатные уроки   |   Создание эффекта подогнутых уголков на CSS3()

  • Bear

    Beautiful one-line (per corner) solution.

  • Q

    Good article, pretty original technique to add an old good border-radius with this different view.

  • avatasia

    Nice work. But if need border, this can’t work.

  • Mohamed Shokry

    you did a great Job

    any one need border use 2 elements

    by z-index on up on the back one the same border color and width = calc(100% + 2 ) if border = 1px

  • anirudh7

    I used this trick to bevel just one corner but how to make it smooth though

  • Pingback: Achieving an Inset border-radius on the Web: The Methods and Madness of Beveled Corners | Currently Unavailable()

  • Krunal Modi

    This one is not working in safari 5.1.7 so can you tell me any solution.

  • Anshul
  • Tim

    GENIUS! I love it. Thanks.

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

  • Techno geek

    How to get smooth edges at negative radius. I did not get smooth edges.

  • Kevin Morris

    For some reason, my implementation of this code has a split in the middle (assuming because of background-size: 50% 50%) – why would this happen?

    • seb

      same on chrome
      (vertical line in the midle)

      • pdepmcp

        It’s because 50% is “rounded” by the rendering engine to an integer value. it means that it only works if width and height are odd numbers, otherwise it could round it down and let a pixel row (or column) without background color.
        You can safely change the 50% value tu 51% to solve this, if your background has no alfa (opacity).
        If you use opacity, the only way I found is to fix width and height to odd numbers.

        • Another solution would be to take an arbitrary length, e.g. 100px and do one of them 100px and the other calc(100% – 100px).

        • Sabina

          Hi, none of these solutions would work for me, so I’ve fixed it the following way: in my case, my box has just 5px wide corner ‘bites’ and 15px padding, so I’ve just adjusted the background-size to calc(100% – 15px);

          You are wonderful, thank you for this awesome trick.

  • Pingback: 在CSS中反转圆角？ – CodingBlog()

  • Pingback: xmt85c4wx5ctwxw3tcerthve56()