Skip to content

Instantly share code, notes, and snippets.

@tanepiper
Forked from anonymous/gist:2039312
Created March 14, 2012 20:44
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save tanepiper/2039373 to your computer and use it in GitHub Desktop.
Save tanepiper/2039373 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);
}
@hoffmanc
Copy link

hoffmanc commented Nov 1, 2012

this is not SASS. Maybe SCSS?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment