Beveled corners & negative border-radius with CSS3 gradients

This content originally appeared on Lea Verou’s blog and was authored 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

This content originally appeared on Lea Verou’s blog and was authored by Lea Verou

Print Share Comment Cite Upload Translate Updates

APA

Lea Verou | Sciencx (2011-03-14T00:00:00+00:00) Beveled corners & negative border-radius with CSS3 gradients. Retrieved from https://www.scien.cx/2011/03/14/beveled-corners-negative-border-radius-with-css3-gradients/

MLA

" » Beveled corners & negative border-radius with CSS3 gradients." Lea Verou | Sciencx - Monday March 14, 2011, https://www.scien.cx/2011/03/14/beveled-corners-negative-border-radius-with-css3-gradients/

HARVARD

Lea Verou | Sciencx Monday March 14, 2011 » Beveled corners & negative border-radius with CSS3 gradients., viewed ,<https://www.scien.cx/2011/03/14/beveled-corners-negative-border-radius-with-css3-gradients/>

VANCOUVER

Lea Verou | Sciencx - » Beveled corners & negative border-radius with CSS3 gradients. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2011/03/14/beveled-corners-negative-border-radius-with-css3-gradients/

CHICAGO

" » Beveled corners & negative border-radius with CSS3 gradients." Lea Verou | Sciencx - Accessed . https://www.scien.cx/2011/03/14/beveled-corners-negative-border-radius-with-css3-gradients/

IEEE

" » Beveled corners & negative border-radius with CSS3 gradients." Lea Verou | Sciencx [Online]. Available: https://www.scien.cx/2011/03/14/beveled-corners-negative-border-radius-with-css3-gradients/. [Accessed: ]

rf:citation

» Beveled corners & negative border-radius with CSS3 gradients | Lea Verou | Sciencx | https://www.scien.cx/2011/03/14/beveled-corners-negative-border-radius-with-css3-gradients/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.