Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.