CSS Rounded Corners

• 
• Tweet
• Share

• Tweet
• Share

Rounded corners in web design are becoming easier and easier to create. Firefox, Safari and Chrome users can experience pure CSS rounded corners through -moz and -webkit attributes. Currently, IE still has no adoption of any of these CSS methods.

DIV {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  padding: 15px 20px;
  background-color: #ccc;
  border: 2px solid #999;
}

Browser-specific CSS attributes

Elliptical radius

The border-radius declaration with one value creates a symmetrically rounded corner. If you want to create a corner or corners that have one side longer than the other (asymmetrical), then an elliptical radius is the next step.

An elliptical radius can be achieved by adding a second value to the declaration. The first value relates to the x-axis (horizontal) and the second value relates to the y-axis (vertical).

-moz-border-radius: 40px/20px;
-webkit-border-radius: 40px 20px;

-moz-border-radius-topleft: 40px 20px;
-webkit-border-top-left-radius: 40px 20px;

CSS for complex cornered elements

In the CSS Attributes reference table above, there is a thead and tbody that have been styled as well as border separators. The table has the rounded corner declaration on it but the thead still had square corners. So we needed to create declarations for the right and left sides by using first-child and last-child pseudo classes. We also used a first-child pseudo class for the border separation.

This is what the CSS looks like for the table:

#attributes {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  font-size: 12px;
  padding: 20px;
  background-color: #eee;
  margin-bottom: 0;
}
#attributes TH {
  font-weight: bold;
  text-align: left;
  background-color: #e3e3e3;
}
#attributes TH:first-child {
  -moz-border-radius-topleft: 8px;
  -webkit-border-top-left-radius: 8px;
  border: none;
}
#attributes TH:last-child {
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
}
#attributes TH,
#attributes TD {
  padding: 5px 10px;
  border-left: 1px solid #ccc;
}
#attributes TD:first-child {
  border: none;
}