[CSS3] Round Corners

In CSS3, you can round the corners of most elements (images, form inputs, and areas).

1. border-radius

The “border-radius” property defines the radius of all 4 corners.

header
{
  width: 400px;
  height:200px;
  background-color: Blue;
  border-radius: 20px;
}

 

2. Elliptical Corners

You can provide the radius of each corner specifically using the following properties:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius
header
{
  width: 400px;
  height:200px;
  background-color: Blue;
  border-top-left-radius:20px;
  border-top-right-radius:0px;
  border-bottom-left-radius:30px;
  border-bottom-right-radius:50px;
}

You can specify all 4 corners in a single property:

border-radius: <top-left & bottom-right> <top-right & bottom-left>

border-radius: <top-left>  <top-right> <bottom-right> <bottom-left>

header
{
  border-radius:0px 30px;
}
header
{
  border-radius:20px 0px 50px 30px;
}

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 )

Connecting to %s