test{
background-color: #ffffcc;
-moz-border-radius: 10px 30px;
border-radius: 10px 30px;
border: 1px solid #000;
padding: 10px;
}
The above code would produce different results in different browsers. CSS3-capable
browsers would apply a corner that has a horizontal radius of 10px and a vertical
radius of 30px to each corner. Gecko browsers, on the other hand, will display
top-left and bottom-right corners with a 10px radius (horizontal and vertical radii),
and top-right and bottom-left corners with a 30px radius, as is shown in Figure 16.1.
Vendor-specific Properties
Figure 16.1: Rounded corners with ??“moz-border-radius
Therefore, to be safe in the future, it would be wise to specify for the
??“moz-border-radius property, and the CSS3 border-radius properties, values that
will produce the same results in both types of browsers. The following example
demonstrates this:
.test{
background-color: #ffffcc;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid #000;
padding: 10px;
}
In this case, every one of the border??™s corners to which this rule is applied will have
a horizontal radius of 10px and a vertical radius of 10px, as shown in Figure 16.
Pages:
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541