Posted By

Ashung on 10/11/08

Tagged

Versions (?)

Last Edited at 10/11/08 01:20pm

Statistics

Viewed 81 times

Favorited by 8 user(s)

Related snippets

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

/ Published in: CSS

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

Highlighted TextExpand

= 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>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.