Skip navigation

Dreamweaver CC

Currently Being Moderated

Reverse Border Radius?

Apr 10, 2012 8:31 PM

Is there any way to create inner radius curves (or whatever they are called) with just CSS?

See attached image...

881 Views 3 Replies Latest reply: Shan-Dysigns, Apr 17, 2012 7:11 PM

Replies

Currently Being Moderated

1. SnakEyez02,

Apr 11, 2012 5:45 AM in reply to Shan-Dysigns

Report

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-wit h-css3-gradients/ ), but for your image that could get tricky.

|
Mark as:
Currently Being Moderated

2. hans-g.,

Apr 11, 2012 6:00 AM in reply to Shan-Dysigns

Report

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-ba r, 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

|
Mark as:
Currently Being Moderated

3. Shan-Dysigns,

Apr 17, 2012 7:11 PM in reply to hans-g.

Report

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.

|
Mark as:

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points