Creating rounded corners using CSS [closed]

Answer 1

Since CSS3 was introduced, the best way to add rounded corners using CSS is by using the border-radius property. You can read the spec on the property, or get some useful implementation information on MDN:

If you are using a browser that doesn't implement border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), then the links below detail a whole bunch of different approaches. Find one that suits your site and coding style, and go with it.

1. CSS Design: Creating Custom Corners & Borders
2. CSS Rounded Corners 'Roundup'
3. 25 Rounded Corners Techniques with CSS

Answer 2

If you are to go with the border-radius solution, there is this awesome website to generate the css that will make it work for safari/chrome/FF.

Anyway, I think your design should not depend on the rounded corner, and if you look at Twitter, they just say F**** to IE and opera users. Rounded corners is a nice to have, and I'm personally ok keeping this for the cool users who don't use IE :).

Now of course it's not the opinion of the clients. Here is the link : http://border-radius.com/

Answer 3

Ruzee Borders is the only Javascript-based anti-aliased rounded corner solution I've found that works in all major browsers (Firefox 2/3, Chrome, Safari 3, IE6/7/8), and ALSO the only one that works when both the rounded element AND the parent element contain a background image. It also does borders, shadows, and glowing.

The newer RUZEE.ShadedBorder is another option, but it lacks support for obtaining style information from CSS.

Answer 4

With support for CSS3 being implemented in newer versions of Firefox, Safari and Chrome, it will also be helpful to look at "Border Radius".

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

Like any other CSS shorthand, the above can also be written in expanded format, and thus achieve different Border Radius for the topleft, topright, etc.

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

Answer 5

As an indication of how complex it is to get rounded corners working, even Yahoo discourages them (see first bulleted point)! Granted, they're only talking about 1 pixel rounded corners in that article but it's interesting to see that even a company with their expertise has concluded they're just too much pain to get them working most of the time.

If your design can survive without them, that's the easiest solution.

Answer 6

Opera does not support border-radius yet (apparently it will be in the release after version 10). In the meantime, you can use CSS to set an SVG background to create a similar effect.