Skip to content

Instantly share code, notes, and snippets.

@kflorence
Created January 18, 2012 22:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save kflorence/1636309 to your computer and use it in GitHub Desktop.
Save kflorence/1636309 to your computer and use it in GitHub Desktop.
SASS Border Opacity Mixin
// Opacity should be on a 100 point scale (0-100 instead of 0.0-1.0)
// This should be used to supplement a normal border definition as it
// only deals with the 'border-color' property.
@mixin border-opacity($color, $opacity) {
$opacity: $opacity / 100;
// Unsupporting browsers get this
border-color: $color;
// Browsers that support RGBA will get this instead
border-color: rgba($color, $opacity);
// Prevent the element's background from reaching the edge of the border
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment