Test on CSS3 box-shadow and border-radius

Posted on June 25, 2010

I've just finished to upload a new test which combines the CSS3 box-shadow and border-radius properties. The code is as follows:

 div.pic {
    
        width: 260px;
        height: 200px;
        background: maroon;
        position: relative;
        border-radius: 8px;
        -moz-border-radius: 8px;
        box-shadow: #666 5px 5px 5px;
        -moz-box-shadow: #666 5px 5px 5px;
        -webkit-box-shadow: #666 5px 5px 5px;
        margin: 0 auto;
}

You can see this test here.

2 thoughts on “Test on CSS3 box-shadow and border-radius”

  2. Raining on your parade:

    You really, I mean really, should change the order in which you list the properties, to take the cascade into account. I note 'border-radius' here, but the same applies to 'box-shadow', of course.

    You currently have:
    > border-radius: 8px;
    > -moz-border-radius: 8px;

    You should turn that around, list the -vendor- properties first, and _then_ the css3 property / notation. That way, you're sure that a UA that currently uses a -vendor-prefixed notation, but in the near future upgrades to use the CSS3 notation will use the 'real' thing, rather than fall back on the -vendor prefixed one. The 'real thing' might be more powerful or more correct or more… etc.

    Here is a quick & dirty example, to be viewed with WebKit (view source…):
    http://dev.l-c-n.com/CSS3_border-background/border-radius_vendor-cascade.html

    Safari 5 and recent Chrome builds support the CSS3 notation, but also support the -vendor-prefixed one. The 2 boxes have the same properties listed. In the second box, the '-webkit-' one wins because it comes last in the code. That is correct per the CSS cascade.
    (the same will happen when Gecko supports the CSS3 notation in Firefox 4)

Leave a Reply

Note: Only a member of this blog may post a comment.