rounded corners

An ordinary div

Row 1

A div with rounded corners

Row 2

The second div looks so much more fun and professional at the same time!

As it turns out, all you need is one or two extra lines in order to add these rounded corners. See code below:

#my_div {
  border-radius: 15px;
}

If you want more fine-tuning, try the following. The first parameter is the horizontal radius of the rounded corner, the second the vertical.

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

Play around with it and see if you can make something like the following. 😉

Hello


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s