Easy Rounded Corners with CSS3

To achieve rounded corners, you can use the CSS3 border-radius property.  A quick and simple example is: #div-name { border-radius: 15px; }

The div with that ID will have rounded corners like this one.

Additionally, Firefox requires a -moz prefix in order for the property to work. Therefore, your final code will look like: #div-name { border-radius: 15px; -moz-border-radius: 15px } This should work in Firefox, Safari, Google Chrome, Opera, and the future Internet Explorer, version 9. Unfortunately, if you want current IE users to see your cool effects, you will still have to use an alternative method for them. For a more comprehensive border-radius explanation, including several examples, visit CSS3.Info. ]]>

Tavis J. Hampton

Tavis J. Hampton

IT worker with a master's in Library and Information Science currently working in the healthcare industry. Passionate about Free and Open Source software.