gil00pita
11/9/2014 - 1:00 PM

CSS: Individual Rounded Corners From http://www.hongkiat.com/blog/css-snippets-for-designers/

CSS: Individual Rounded Corners From http://www.hongkiat.com/blog/css-snippets-for-designers/

individual.rounded.corners.css
content_copyfile_download
/*   Broder Syntax
 *   [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
 *   Ex:
 *   border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
 *   
 *   Firefox
 *   -moz-border-radius: [top-left] [top-right] [bottom-right] [bottom-left]
 *   
 *   Elliptical Rounding Shorthand (Firefox 3.5+):
 *  -moz-border-radius: [horizontal radius] / [vertical radius];
 * 
 * */

#container {
    -webkit-border-radius: 10px 20px 30px 0px;
    -moz-border-radius: 10px 20px 30px 0px;
    -o-border-radius: 10px 20px 30px 0px;
    border-radius: 10px 20px 30px 0px;
}
/* alternative syntax broken into each line */
#container {
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 30px;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 30px;
    -webkit-border-bottom-left-radius: 0;
}