Skip to content

Instantly share code, notes, and snippets.

@danmartin
Last active January 1, 2016 21:08
Show Gist options
  • Save danmartin/ab532445d6cc29a46dcb to your computer and use it in GitHub Desktop.
Save danmartin/ab532445d6cc29a46dcb to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.3.2)
// ----
// https://web-design-weekly.com/2013/05/12/handy-sass-mixins/
// A mixin for all corners
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
border-radius: $radius;
background-clip: padding-box; /* stops bg color from leaking outside the border: */
}
// Single side border-radius
// Another mixin just for the top
@mixin border-top-radius($radius) {
-webkit-border-top-right-radius: $radius;
border-top-right-radius: $radius;
-webkit-border-top-left-radius: $radius;
border-top-left-radius: $radius;
background-clip: padding-box;
}
// Another mixin just for the right side
@mixin border-right-radius($radius) {
-webkit-border-bottom-right-radius: $radius;
border-bottom-right-radius: $radius;
-webkit-border-top-right-radius: $radius;
border-top-right-radius: $radius;
background-clip: padding-box;
}
// Another mixin just for the bottom
@mixin border-bottom-radius($radius) {
-webkit-border-bottom-right-radius: $radius;
border-bottom-right-radius: $radius;
-webkit-border-bottom-left-radius: $radius;
border-bottom-left-radius: $radius;
background-clip: padding-box;
}
// Another mixin just for the left side
@mixin border-left-radius($radius) {
-webkit-border-bottom-left-radius: $radius;
border-bottom-left-radius: $radius;
-webkit-border-top-left-radius: $radius;
border-top-left-radius: $radius;
background-clip: padding-box;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment