GRADIENT and ROUNDED CORNERS

progressive enhancement test

by Leo Lanese

HTML

<!doctype html>
<html>
<head></head>
<body>
<div id="box">
<pre style="padding:.7em;color:#ededed;min-height:3em;">
    border:2px solid #000;

    /* for non-css3 browsers */
    background: #ededed;

    /* gradient IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#ededed');

    /* gradient webkit */
    background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#ededed));

    /* gradient moz */
    background: -moz-linear-gradient(top, #CCC, #ededed);

    border-radius: 10px;
</pre>

</div>
</body>

</html>

CSS

#box {
    border:2px solid #000;
    margin:2em;
    
    
    /* gradient example */
    /* for non-css3 browsers */
    background: #ededed;

    /* gradient IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000');

    /* gradient webkit */
    background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#000));

    /* gradient moz */
    background: -moz-linear-gradient(top, #CCC, #000);

    /* border example */
    /* mozilla */
    -moz-border-radius: 10px;

    /* webkit */     
    border-radius: 15px;
    
    /* IE ... :'( */
    /* download polyfill ? ... */
}