Lea Verou 3/14/2011

Beveled corners & negative border-radius with CSS3 gradients

Read Original

This technical CSS article demonstrates a method for creating beveled corners and simulating negative border-radius effects using CSS3 gradients. The technique provides a pure CSS solution that eliminates the need for images, works across modern browsers including Firefox, Chrome, Safari, Opera and IE10+, and includes solid color fallbacks for unsupported browsers.

Beveled corners & negative border-radius with CSS3 gradients

Comments

No comments yet

Be the first to share your thoughts!

Browser Extension

Get instant access to AllDevBlogs from your browser

Top of the Week

2
Designing Design Systems
TkDodo Dominik Dorfmeister 2 votes
4
Introducing RSC Explorer
Dan Abramov 1 votes
6
Fragments Dec 11
Martin Fowler 1 votes
7
Adding Type Hints to my Blog
Daniel Feldroy 1 votes
8
Refactoring English: Month 12
Michael Lynch 1 votes
10