Css – Creating rounded corners using CSS


How can I create rounded corners using CSS?

Best Answer

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