All Design Journal Notes Tutorial

Q & A: How To Make Div’s With Rounded Corners In CSS?


How can I make boxes and div’s with rounded corners?


CSS3 is the first version to have built-in rounded rectangle commands. The css property that addresses is this:


It’s usage is:

border-radius: 15px;

Fairly simple and straight-forward; the higher the number the deeper the corner rounding.

If you have an older browser that does not support CSS3, then your only option is to pre-build the corners as images (gif or png for transparency) in Photoshop, Gimp, or some other graphic design program. After you have your corner(s) built, you would then use css to postion them around a rectangle button. There are many older tutorials that explain how to do this. Here is one


Notify of
Inline Feedbacks
View all comments