Skip to content

Instantly share code, notes, and snippets.

@gil00pita
Last active August 29, 2015 14:09
Show Gist options
  • Save gil00pita/506198611f92928bf2b7 to your computer and use it in GitHub Desktop.
Save gil00pita/506198611f92928bf2b7 to your computer and use it in GitHub Desktop.
CSS: Individual Rounded Corners From http://www.hongkiat.com/blog/css-snippets-for-designers/
/* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment