Skip to content

Instantly share code, notes, and snippets.

@victorbstan
Created March 27, 2011 18:48
Show Gist options
  • Save victorbstan/889463 to your computer and use it in GitHub Desktop.
Save victorbstan/889463 to your computer and use it in GitHub Desktop.
SASS cross browser rounded corner mixins
$default_rounded_amount: 5px
// Round corner at position by amount.
@mixin round-corner($position, $amount: $default_rounded_amount)
border-#{$position}-radius: $amount
-webkit-border-#{$position}-radius: $amount
@mixin round-corner-mozilla($position, $amount: $default_rounded_amount)
-moz-border-radius-#{$position}: $amount
// Round left corners by amount
@mixin round-left-corners($amount: $default_rounded_amount)
@include round-corner("top-left", $amount)
@include round-corner("bottom-left", $amount)
@include round-corner-mozilla("topleft", $amount)
@include round-corner-mozilla("bottomleft", $amount)
// Round right corners by amount
@mixin round-right-corners($amount: $default_rounded_amount)
@include round-corner("top-right", $amount)
@include round-corner("bottom-right", $amount)
@include round-corner-mozilla("topright", $amount)
@include round-corner-mozilla("bottomright", $amount)
// Round top corners by amount
@mixin round-top-corners($amount: 5px)
@include round-corner("top-left", $amount)
@include round-corner("top-right", $amount)
@include round-corner-mozilla("topleft", $amount)
@include round-corner-mozilla("topright", $amount)
// Round bottom corners by amount
@mixin round-bottom-corners($amount: $default_rounded_amount)
@include round-corner("bottom-left", $amount)
@include round-corner("bottom-right", $amount)
@include round-corner-mozilla("bottomleft", $amount)
@include round-corner-mozilla("bottomright", $amount)
// Round all corners by amount
@mixin round-corners($amount: $default_rounded_amount)
border-radius: $amount
-moz-border-radius: $amount
-webkit-border-radius: $amount
@leongaban
Copy link

Fix, added {} and ;

// Round top corners by amount
@mixin round-corner($position, $amount: $default_rounded_amount) {
border-#{$position}-radius: $amount;
-webkit-border-#{$position}-radius: $amount;
}
@mixin round-corner-mozilla($position, $amount: $default_rounded_amount) {
-moz-border-radius-#{$position}: $amount;
}

@mixin round-top-corners($amount: $amount) {
@include round-corner("top-left", $amount);
@include round-corner("top-right", $amount);
@include round-corner-mozilla("topleft", $amount);
@include round-corner-mozilla("topright", $amount);
}

// Round bottom corners by amount
@mixin round-bottom-corners($amount: $amount) {
@include round-corner("bottom-left", $amount);
@include round-corner("bottom-right", $amount);
@include round-corner-mozilla("bottomleft", $amount);
@include round-corner-mozilla("bottomright", $amount);
}

@chrishough
Copy link

Great guide! I just found this that may help the box-shadow

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow:$top $left $blur $color #{$inset};
  -moz-box-shadow:$top $left $blur $color #{$inset};
  box-shadow:$top $left $blur $color #{$inset};
}

http://stackoverflow.com/questions/3525007/making-a-sass-mixin-with-optional-arguments

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