Skip to content

Instantly share code, notes, and snippets.

@calderon
Created November 28, 2011 19:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save calderon/1401658 to your computer and use it in GitHub Desktop.
Save calderon/1401658 to your computer and use it in GitHub Desktop.
Home-made border-radius SCSS mixin
$default-border-radius: 10px;
@mixin radius($radius: $default-border-radius){
@include left-radius($radius);
@include right-radius($radius);
}
@mixin top-radius($radius: $default-border-radius){
@include top-left-radius($radius);
@include top-right-radius($radius);
}
@mixin bottom-radius($radius: $default-border-radius){
@include bottom-left-radius($radius);
@include bottom-right-radius($radius);
}
@mixin top-left-radius($radius: $default-border-radius){
border-top-left-radius: $radius;
-moz-border-radius-topleft: $radius;
-webkit-border-top-left-radius: $radius;
}
@mixin bottom-left-radius($radius: $default-border-radius){
border-bottom-left-radius: $radius;
-moz-border-radius-bottomleft: $radius;
-webkit-border-bottom-left-radius: $radius;
}
@mixin left-radius($radius: $default-border-radius){
@include top-left-radius($radius);
@include bottom-left-radius($radius);
}
@mixin top-right-radius($radius: $default-border-radius){
border-top-right-radius: $radius;
-moz-border-radius-topright: $radius;
-webkit-border-top-right-radius: $radius;
}
@mixin bottom-right-radius($radius: $default-border-radius){
border-bottom-right-radius: $radius;
-moz-border-radius-bottomright: $radius;
-webkit-border-bottom-right-radius: $radius;
}
@mixin right-radius($radius: $default-border-radius){
@include top-right-radius($radius);
@include bottom-right-radius($radius);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment