Rounded Corners in CSS

Rounded corners are created using the border-radius rule in CSS. There are five ways you can actually implement this. The first four ways use the shorthand format, and the last way uses the standard format.

The first method in shorthand uses one value which will apply to all four corners.

-webkit-border-radius: 1em;
   -moz-border-radius: 1em;
        border-radius: 1em;

The second method in shorthand uses two values; the first value (top-left & bottom-right), the second value (top-right & bottom-left).

-webkit-border-radius: 4em 1em;
   -moz-border-radius: 4em 1em;
        border-radius: 4em 1em;

The third method in shorthand uses three values; the first value (top-left), the second value (top-right & bottom-left) and the third value (bottom-right).

-webkit-border-radius: 4em 1em 20em;
   -moz-border-radius: 4em 1em 20em;
        border-radius: 4em 1em 20em;

The fourth method in shorthand uses four values; (top-left, top-right, bottom-right, bottom-left).

-webkit-border-radius: 1em 4em 0 .5em;
   -moz-border-radius: 1em 4em 0 .5em;
        border-radius: 1em 4em 0 .5em;

The fifth and final method is in standard format, this is the same example as in the fourth method.

-webkit-border-top-left-radius: 1em;
-webkit-border-top-right-radius: 4em;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: .5em;

-moz-border-radius-topleft: 1em;
-moz-border-radius-topright: 4em;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: .5em;

border-top-left-radius: 1em;
border-top-right-radius: 4em;
border-bottom-right-radius: 0;
border-bottom-left-radius: .5em;

Want to make a circle? No problemo, just use percentages as your units.

-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
        border-radius: 50%;

Source: CSS3 Rounded Corners

Post a Comment

To post code, use the code tag with a class language-*
Examples: code class="language-markup"code class="language-css"