CSS3 - rounded corners -moz-border-radius

Last time, I was talking about rounded corners in article CSS3 - rounded corners - How To, now I think it's time to get a little bit deeper and explain something about property -moz-border-radius, so you can see what is capable of.
First of all, -moz-border-radius is supported in Mozilla browsers, and it works in Firefox 3.0 or later versions.
In previous article, I made a div, with background color and border, this time I will only use div with background color and fixed width and height, you can add borders later if you want.
So let's get started :-)




I will define div class named rounded, with width of 200px, height of 100px and blue background, this will be the basis for all other rounded corner divs.

div.rounded {
width:200px;
height:100px;
background:#0000ff;
}

The preview of normal div:

All four rounded corners

This shorthand property will define radius of 25px to all four corners.

div.rounded {
-moz-border-radius:25px;
}

The preview of all four rounded corners:

Rounded corners with two different values

If you assign 2 values, first value defines the radius of top-left and bottom-right corner, second one defines the radius of top-right and bottom-left corner.

div.rounded {
-moz-border-radius:25px 75px;
}

The preview of rounded corners with 2 defined values, 25px and 75px:

Rounded corners with three different values

If you want to have three different corners, you just have to define three values.
The sequence of values goes so:
1. First value defines the radius of top-left corner, in this case 25px
2. Second value defines the radius of top-right and bottom-left corners, in this case 75px
3. Third value defines the radius of bottom-right corner, in this case 5px
Let's see how to define:

div.rounded {
-moz-border-radius:25px 75px 5px;
}

Here comes the preview of three defined values:

Rounded corners with four different values

Like we did above, we can also define all four values, to set different radius for each corner, and the sequence goes so:
1. Value for top-left
2. Value for top-right
3. Value for bottom-right
4. Value for bottom-left

div.rounded {
-moz-border-radius:15px 30px 45px 60px;
}

The values you can see above, here comes the preview:

Define radius for each corner

If you want to define the radius for each corner you can do it in two ways.

One way - only top-left corner will be defined (15px), others will have radius of 0px

div.rounded {
-moz-border-radius:15px 0px 0px 0px;
}

Second way, you can define only one property, which are:
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft

Here is the same trick like above, I will define only the top-left corner, others won't be defined.

div.rounded {
-moz-border-radius-topleft:15px;
}

The result is the same in both ways, here is the preview:

Horizontal and vertical radius

Let's say, you want do define the corner radius, but want it to look like elipse. Simple trick will do the work, let's see.
In this example I want only top right corner to be defined, and the horizontal radius will be 45px, vertical will be 15px.

div.rounded {
-moz-border-radius-topright: 45px 15px;
}

And it should look like this:



But what if you want to define all four corners with different horizontal and vertical value? I prefer shorthand properties, so let's have a look bellow.
The tricky part does the / character!

div.rounded {
-moz-border-radius:15px 30px 45px 60px / 7px 15px 22px 30px;
}

Here comes the preview of all four defined corners with horizontal and vertical values:



That's all for today, see you next time when we will take closer look of webkit-border-radius, so stay tuned!