Beveled corners & negative border-radius with CSS3 gradients

Posted on March 14, 2011 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 😛

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!
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)
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?
- 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.
  - 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?
    - 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
    - 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!
Theo

Clever and nice idea and Glad you’re well!
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?
- Lea Verou
  
  Probably because the new gradient syntax hasn’t propagated yet to Mobile Safari.
  - Omahr Carpinteyro
    
    I’ve tried in my safari on my mac and it doesn’t work either
    - Lea Verou
      
      Try the nightlies, it definitely works there 🙂
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.
- Lea Verou
  
  What the eff are you talking about? Have you even looked at the spec? http://www.w3.org/TR/css3-images/
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
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?
- 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
Bhasker Reddy Kottapally

This does not seem to work in IE9. Any suggestions?
Pingback: Everyday Achievements()
Joep Klunhaar

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?
- Lea Verou
  
  Change 50% to 51% in background-size.
  - Sean Cassidy
    
    Thanks a million!! Really great work
Pingback: 10+ Fresh CSS3-Only Tutorials (Look Ma, No Javascript!) | gonzoblog()
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…..
- 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 😉
- 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);
  - Ravi
    
    If we want to make it only with border radius not with background, do you know how it possible?
jay

not working..
- 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?
- 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?
    - 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!
- 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.
    - 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?
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

can some one please help me to solve this question
http://stackoverflow.com/questions/33514840/how-to-draw-a-shape-using-a-piece-of-image-in-php
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.
    - Lea Verou
      
      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()
Pingback: drinking problems()
Pingback: دانلود شهرزاد قسمت دوازدهم فصل دوم()
Pingback: دانلود شهرزاد قسمت هشتم فصل دوم()
Pingback: دانلود شهرزاد قسمت نهم فصل دوم()
Pingback: lesbian sex()
Pingback: دانلود قسمت 10 شهرزاد دوم()
Pingback: دانلود قسمت 14عاشقانه()
Pingback: دانلود قسمت هفدهم عاشقانه()
Pingback: دانلود قسمت دوازدهم عاشقانه()
Pingback: Cherry Hilson()
Pingback: Angela White()
Pingback: Isis Love()
Pingback: Kitty Catherine()
Pingback: Jessie Volt()
Pingback: Mia Malkova()
Pingback: Karter Foxx()
Pingback: dolandirici sosyalmarketim()
Pingback: hampton bay ceiling fan blog()
Pingback: Paleo Diet()
Pingback: Cherry Hilson()
Pingback: Free Stuff Worldwide()
Pingback: online movie()
Pingback: casinos()
Pingback: دانلود قسمت دوازه عاشقانه()
Pingback: دانلود سریال عاشقانه()
Pingback: پنجره()
Pingback: دانلود قسمت اول شهرزاد دوم()
Pingback: Hundeskove i Nordjylland()
Pingback: Loyola College for Sale()
Pingback: دانلود قسمت یازدهم شهرزاد دوم()
Pingback: دانلود قسمت پنجم شهرزاد دوم()
Pingback: دانلود قسمت دوازدهم عاشقانه()
Pingback: دانلود قسمت سیزده عاشقانه()
Pingback: under armour shoes australia()
Pingback: bypass windows 7 administrator password()
Pingback: دانلود قسمت اول فصل دوم شهرزاد()
Pingback: Magdalene()
Pingback: videos porno()
Pingback: porno gratis()
Pingback: taylormade m2 australia()
Pingback: porno()
Pingback: videos porno()
Pingback: videos porno()
Pingback: videos porno()
Pingback: videos porno()
Pingback: porno gratis()
Pingback: porno()
Pingback: porno gratis()
Pingback: porno gratis()
Pingback: porno gratis()
Pingback: porno gratis()
Pingback: videos porno()
Pingback: porno gratis()
Pingback: porno gratis()
Pingback: ساخت پنجره دو سه جداره()
Pingback: دانلود قسمت هفده عاشقانه()
Pingback: قیمت پنجره()
Pingback: پنجره دوجداره ویستابست()
Pingback: auto shipping()
Pingback: دانلود فیلم سریال عاشقانه()
Pingback: Acne Facial Treatments Dania Beach()
Pingback: Acne Facial Treatments Southwest Ranches, Florida()
Pingback: Acne Facial Treatments Lighthouse Point()
Pingback: Facial Spa Services Pompano Beach()
Pingback: Acne Facial Treatments Southwest Ranches, Florida()
Pingback: Facial Spa Services West Park()
Pingback: فروش توری پنجره دوجداره()
Pingback: thigh wrap()
Pingback: دانلود موزیک()
Pingback: پنجره دوجداره()
Pingback: دانلود قسمت پنجم شهرزاد دوم()
Pingback: دانلود قسمت ششم شهرزاد دوم()
Pingback: gamble bitcoin()
Pingback: lesbo()
Pingback: Roof Repair Long Island()
Pingback: hotel booking search engine()
Pingback: cheap jordans for sale()
Pingback: visitez le site()
Pingback: zynga poker chips()
Pingback: jake burgess east berlin ct()
Pingback: دانلود قسمت هفتم شهرزاد دوم()
Pingback: gems and coins for clash royale()
Pingback: led lights()
Pingback: Situs Bandar Bola Judi Casino Slots Terpercaya()
Pingback: پنجره دو سه جداره()
Pingback: magazin de pescuit()
Pingback: coin-banks trading()
Pingback: bitcoin investment coin-banks()
Pingback: coin-banks review()
Pingback: coin-banks cryptocurrency()
Pingback: Headlight Lens Correction()
Pingback: coin-banks.com()
Pingback: coin-banks exchange()
Pingback: Porn()
Pingback: bitcoin investment coin-banks()
Pingback: DraftKings DFS()
Pingback: coin-banks review()
Pingback: rookie baseball card collection()
Pingback: دانلود قسمت هشتم شهرزاد دوم()
Pingback: le domaine()
Pingback: nico control ï¿½ bom()
Pingback: anime()
Pingback: کول دانلول()
Pingback: vpm()
Pingback: best price golf clubs australia()
Pingback: visit this link()
Pingback: دانلود شهرزاد قسمت سیزده 13()
Pingback: دانلود سریال شهرزاد قسمت 15 پانزده()
Pingback: دانلود شهرزاد سیزده 13()
Pingback: دانلود سریال شهرزاد قسمت 15()
Pingback: پنجره دوجداره()
Pingback: Accounting firms in chicago()
Pingback: ΤΣΑΝΤA TRUSSARDI()
Pingback: http://xsc.jlau.edu.cn/Bbs/home.php?mod=space&uid=1782360&do=profile&from=space()
Pingback: https://ask.fm/meditus1()
Pingback: http://www.bigdata.ac.cn/home.php?mod=space&uid=1291635&do=profile&from=space()
Pingback: ΤΣΑΝΤΕΣ TRUSSARDI()
Pingback: Auto Show()
Pingback: free()
Pingback: agrandir penis()
Pingback: kids cars()
Pingback: 16 دانلود سریال شهرزاد()
Pingback: Teresa()
Pingback: I was reading this()
Pingback: NEM()
Pingback: دانلود شهرزاد قسمت 16()
Pingback: internet business()
Pingback: دانلود عالیجناب قسمت اول()
Pingback: 火锅()
Pingback: versos cortos()
Pingback: versos cortos()
Pingback: دانلود قسمت دوم سریال عالیجناب()
Pingback: دانلود عالیجناب دوم()
Pingback: دانلود فیلم()
Pingback: دانلود فیلم()
Pingback: game()
Pingback: consulta cpf online gratis()
Pingback: پنجره ضد سرقت()
Pingback: دانلود()
Pingback: شرکت تولیدی پنجره دوجداره ایرانی()
Pingback: آموزش پنجره دوجداره()
Pingback: قیمت پنجره دوجداره()
Pingback: 5 little()
Pingback: دانلود فیلم()
Pingback: فروش توری پنجره دوجداره()
Pingback: Tile and Grout Cleaning Killeen TX()
Pingback: easy business ideas()
Pingback: Boxspringbett mit Bettkasten()
Pingback: m1 driver australia()
Pingback: big truck()
Pingback: contributeur()
Pingback: discount codes()