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

Question:

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

Answer:

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

border-radius

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

-Kristobaldude

Date Published: 2012-03-04
Date Updated: 2022-09-05

Eric Hepperle

Eric loves to write code, play guitar, and help businesses solve challenges with code and design.
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x