Skip to content

Instantly share code, notes, and snippets.

@jlong
Created July 4, 2009 04:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jlong/140430 to your computer and use it in GitHub Desktop.
Save jlong/140430 to your computer and use it in GitHub Desktop.
SASS mixins for rounding corners
!default_rounded_amount ||= 5px
// Round corner at position by amount.
// values for position: "top-left", "top-right", "bottom-left", "bottom-right"
=round-corner(!position, !amount = !default_rounded_amount)
border-#{!position}-radius= !amount
-moz-border-#{!position}-radius= !amount
-webkit-border-#{!position}-radius= !amount
// Round left corners by amount
=round-left-corners(!amount = !default_rounded_amount)
+round-corner("top-left", !amount)
+round-corner("bottom-left", !amount)
// Round right corners by amount
=round-right-corners(!amount = !default_rounded_amount)
+round-corner("top-right", !amount)
+round-corner("bottom-right", !amount)
// Round top corners by amount
=round-top-corners(!amount = !default_rounded_amount)
+round-corner("top-left", !amount)
+round-corner("top-right", !amount)
// Round bottom corners by amount
=round-bottom-corners(!amount = !default_rounded_amount)
+round-corner("bottom-left", !amount)
+round-corner("bottom-right", !amount)
// Round all corners by amount
=round-corners(!amount = !default_rounded_amount)
border-radius: !amount
-moz-border-radius= !amount
-webkit-border-radius= !amount
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment