Reverse Border Radius?
Is there any way to create inner radius curves (or whatever they are called) with just CSS?
See attached image...
-
1. Re: Reverse Border Radius?
I've never seen a way to create that exact image with just border-radius. There is a hack to use gradients to alter the border appearance ( http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/ ), but for your image that could get tricky.
-
2. Re: Reverse Border Radius?
Hi,
I hesitated with my answer for a while. Reason is: IE users will not see the curves. Please have a look to SnakeEyesz link in IE and in FF you will see the difference.
Since IE is still one of the most widely used browsers, please have a look here: http://gs.statcounter.com/#browser_version-ww-monthly-201201-201204-bar, so I would like to advise against the use of this gimmick.
Maybe you can accomplish the same by creating an image where you put hotspots on it ( > image maps).
Hans-Günter
-
3. Re: Reverse Border Radius?
I just did it the ole' fashion tacky way. The top 10px of the image is a .png, then I have a div below it with border radius on the bottom. I am using CSS3 PIE. All works as expected in IE and other browsers. And, by the way, I don't know what browser reports you follow, but IE has lost it's top ranking long ago.
http://www.texassci.com/ is where I ended up using what I mentioned above.