Home

How to Make Rounded Corners in Pure CSS

Printer-friendly versionPrinter-friendly versionSend to friendSend to friendPDF versionPDF version

In the ancient times of Internet you had to use hard-coded images for rounded corners on a website. In these days, however, you can use a simple CSS declaration to get rounded corners of almost every HTML element.

To make your HTML element rounded, use the following CSS statement:

border-radius: 4px 4px 4px 4px;

Specify radius in pixels. You can specify different radius for every four corners. This trick works in IE9 onwards and other modern browsers including Firefox 3.6 and higher.

Listed in

User comments on this frequently asked question:

Submitted by greg (not verified) on September 8, 2011 - 12:38.

Can I use single parameter for all corners like in regular CSS statements also?

Submitted by Guest (not verified) on September 8, 2011 - 09:12.

Will it work for iPod / iPhone (Safari) and Android? Android uses Firefox mainly so I assume yes, but better safe than sorry... Please respond.

Submitted by Guest (not verified) on September 8, 2011 - 08:05.

It really is that easy? OMG!

Submitted by n00b (not verified) on September 8, 2011 - 05:43.

Will it work for all browsers?

Submitted by exo (not verified) on September 8, 2011 - 06:30.

It will only work for IE9 and newer, but Firefox has been supporting this for a pretty long time now so that I assume it will work with almost every version of Firefox and Chrome.

Submitted by Nanini (not verified) on September 8, 2011 - 05:41.

Absolutely great tip on CSS. I didn't know it was that easy to make rounded corners. Thanks so much!