Rounded corners for Safari/Chrome, Opera and IE9:
#example {
border-radius: 15px;
}
Rounded corners to be supported by Firefox as well:
#example {
-moz-border-radius: 15px;
border-radius: 15px;
}
The border-radius shorthand property can be used to define all four
corners simultaneously. The property accepts either one or two sets of
values, each consisting of one to four lengths or percentages.
Example:
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;
The first set of (1-4) values define the horizontal radii for all
four corners. An optional second set of values, preceded by a ‘/’,
define the vertical radii for all four corners. If only one set of
values are supplied, these are used to determine both the vertical and
horizontal equally.
If all four values are supplied, these represent the top-left,
top-right, bottom-right and bottom-left radii respectively. If
bottom-left is omitted it is the same as top-right, if bottom-right is
omitted it is the same as top-left, and if only one value is supplied it
is used to set all four radii equally.
Basic examples that should work in current versions of Firefox, Safari/Chrome, Opera and even IE9:
#Example_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#Example_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}
#Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
#Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
#Example_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
#Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}
Another opinion in considering most of the browsers when create rounded conners through CSS:
Since each of the browsers still has its own unique idiosyncrasies, they apply prefixes such as
-moz and
-webkit.
-moz-border-radius is for Firefox,
-webkit-border-radius is for Chrome/Safari and
-khtml-border-radius is for older Konquerer browsers.
rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px; }
