Creating rounded corners using CSS

cross-browser rounded-corners css
Eldila picture Eldila · Aug 10, 2008 · Viewed 69.3k times · Source

How can I create rounded corners using CSS?

Answer

Yaakov Ellis picture Yaakov Ellis · Aug 10, 2008

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

Related questions

How to disable text selection highlighting

For anchors that act like buttons (for example Questions, Tags, Users, etc. which are located on the top of the Stack Overflow page) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally …

Read More
How do I style a <select> dropdown with only CSS?

Is there a CSS-only way to style a <select> dropdown? I need to style a <select> form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in …

Read More
Get the size of the screen, current web page and browser window

How can I get windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY which will work in all major browsers?

Read More