Skip to content

Instantly share code, notes, and snippets.

Created March 14, 2012 20:34
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/2039312 to your computer and use it in GitHub Desktop.
Save anonymous/2039312 to your computer and use it in GitHub Desktop.
SASS mixins for roundcorners
// Example of a whole load of mixins to make round corners
// (including individual corners) easy to remember in SASS
@mixin roundcorners($radius) {
-moz-border-radius: $radius; // firefox
-webkit-border-radius: $radius; // safari/chrome
border-radius: $radius; // CSS3, works in IE9
}
@mixin roundcorner1($radius, $corner: "top-left") {
-moz-border-#{$corner}-radius: $radius ; // firefox
-webkit-border-#{$corner}-radius: $radius; // safari/chrome
border-#{$corner}-radius: $radius; // CSS3, works in IE9
}
@mixin squarecorner1($corner: "top-left") {
@include roundcorner1(0px, $corner);
}
@mixin roundcornerTL($radius:5px) { @include roundcorner1($radius, "top-left"); }
@mixin roundcornerTR($radius:5px) { @include roundcorner1($radius, "top-right"); }
@mixin roundcornerBL($radius:5px) { @include roundcorner1($radius, "bottom-left"); }
@mixin roundcornerBR($radius:5px) { @include roundcorner1($radius, "bottom-right"); }
@mixin squarecornerTL() { @include roundcornerTL(0px); }
@mixin squarecornerTR() { @include roundcornerTR(0px); }
@mixin squarecornerBL() { @include roundcornerBL(0px); }
@mixin squarecornerBR() { @include roundcornerBR(0px); }
// Most simplistic application of above
.rounded {
@include roundcorners(5px);
}
.roundedTop {
@include roundcornerTL(5px);
@include roundcornerTR(5px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment