Advanced Search

Return to Snippet

Revision: 8873
at December 21, 2008 22:06 by Ashung
Updated Code 
= HTML ==================================================
<div class="roundedbox">...</div>

= CSS ===================================================
.roundedbox {
    width: 100px;
    height: 100px;
    background: #666;
    -webkit-border-radius: 5px;
    /*
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    */
    -moz-border-radius: 5px;
    /*
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-bottomleft:5px;
    */
    border-radius: 5px;
    /*
    border-top-left-radius:5px;
    border-top-left-radius:5px;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
    */
}
/*= CSS hack for Opera 9.5 Rounded Corners */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    .roundedbox {
        background:transparent url(shadow.svg); 
    }
}

= SVG file ==============================================
<?xml version="1.0">
<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" rx="5" style="fill:#666666;" />
</svg>

Revision: 8872
at October 11, 2008 13:20 by Ashung
Initial Code 
= HTML ==================================================
<div class="roundedbox">...</div>

= CSS ===================================================
.roundedbox {
    width: 100px;
    height: 100px;
    background: #666;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
/*= CSS hack for Opera 9.5 Rounded Corners */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    .roundedbox {
        background:transparent url(shadow.svg); 
    }
}

= SVG file ==============================================
<?xml version="1.0">
<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" rx="5" style="fill:#666666;" />
</svg>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
CSS Rounded Corners  without images 
support: Firfox 2-3, Safari, Chrome, Opera 9.5(use svg)

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
CSS Rounded Corners  without images support Firfox, Safari, Chrome, Opera

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS