CODEWITHSUNDEEP
javascripthtmlcss
Samuel Liew
Samuel Liew

Reputation: 79093

CSS Cross-Browser Curved Borders

What is the correct/best way to define cross-browser CSS/CSS3 compliant/valid curved borders?

Is there a non-JavaScript way of doing so, while being cross-browser compatible? If not, is there any proper workaround?

Upvotes: 1

Views: 549

Answers (4)

rsp
rsp

Reputation: 111446

See the CSS Border Radius Generator (simple rounded corners) or CSS3 Please (more effects) for a CSS-only solution. If you want something that works in Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ with no images then try Raphaël. Here's a nice talk by Dmitry Baranovskiy, author of Raphaël, explaining why it's cool.

Upvotes: 2

thirtydot
thirtydot

Reputation: 228232

You should use this:

-moz-border-radius: 20px;
border-radius: 20px

WebKit has supported plain border-radius for a while now.

http://css3generator.com/ for example, has dropped the -webkit prefix.

To make this work in Internet Explorer, I recommend using CSS3 PIE, which is as simple as downloading a small file, and adding this to your CSS:

behavior: url(PIE.htc)

Of course, this will only work when Javascript is turned on in IE (which is usually the case).

Upvotes: 1

Kieran Andrews
Kieran Andrews

Reputation: 5885

The best way to do it is with border-radius.

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px

This is only compatible in Safari, Firefox and Chrome. This does not work for IE 7+8 (and less)

If you want the most compatibility but the least amount of flexibility, images are the way to go.

If you want flexibility and browser compatibility go with javascript. The best one I have found converts the CSS3 declatation to rounder corners in IE 7+8.

Check that one out here: http://www.curvycorners.net/

Upvotes: 1

biscuitstack
biscuitstack

Reputation: 12132

Have you tried:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px

together? That should cover the primary 3 browsers in their latest releases (at least). Without javascript or using images, you're not going to get full cross-browser coverage.

Upvotes: 2

Related Questions