Comments on: border-radius: Safari vs Mozilla

By: Type-Style

Type-Style — Wed, 17 Mar 2010 15:55:49 +0000

Once again thanks!
Yep, that makes thanks and is clearer.
So oval curves are possible.

By: Peter

Peter — Tue, 16 Mar 2010 23:36:10 +0000

So, each border radius takes two values: x & y. When you use only a single value, it assumes x & y are the same. So:

–moz-border-radius-topleft: 10px
=
–moz-border-radius-topleft: 10px 10px

That would make a circular radius. But you could also have an oval radius by using two different values:

–moz-border-radius-topleft: 10px 5px

But to not have confusion in the shorthand radius, you separate those values with the forward slash; for example, if you wanted all of your corners to have that radius, you’d use:

–moz-border-radius: 10px / 5px

Is that clearer?

By: Type-Style

Type-Style — Tue, 16 Mar 2010 16:16:49 +0000

Yes it does.
But where is the difference between those two lines?
I did´t get that one.

Am I am able to define a small radius at the beginning and a lager at the End with the second one?

By: Peter

Peter — Fri, 05 Mar 2010 17:03:48 +0000

It wouldn’t work; as your example uses the same value pairs, you could either use:

–moz-border-radius: 5px 10px 10px 20px;

or:

–moz-border-radius: 5px 10px 10px 20px / 5px 10px 10px 20px;

Both should work.

By: Type-Style

Type-Style — Fri, 05 Mar 2010 16:53:28 +0000

–moz-border-radius: 5px 5px 10px 10px 10px 10px 20px 20px;
doesn´t work for me!