Advanced Search

Round Corners SASS

/ Published in: SASS
Save to your folder(s)
SASS, not SCSS

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. !default_rounded_amount ||= 5px
  2.  
  3. // Round corner at position by amount.
  4. // values for position: "top-left", "top-right", "bottom-left", "bottom-right"
  5. =round-corner(!position, !amount = !default_rounded_amount)
  6.   border-#{!position}-radius= !amount
  7.   -moz-border-#{!position}-radius= !amount
  8.   -webkit-border-#{!position}-radius= !amount
  9.  
  10. // Round left corners by amount
  11. =round-left-corners(!amount = !default_rounded_amount)
  12.   +round-corner("top-left", !amount)
  13.   +round-corner("bottom-left", !amount)
  14.  
  15. // Round right corners by amount
  16. =round-right-corners(!amount = !default_rounded_amount)
  17.   +round-corner("top-right", !amount)
  18.   +round-corner("bottom-right", !amount)
  19.  
  20. // Round top corners by amount
  21. =round-top-corners(!amount = !default_rounded_amount)
  22.   +round-corner("top-left", !amount)
  23.   +round-corner("top-right", !amount)
  24.  
  25. // Round bottom corners by amount
  26. =round-bottom-corners(!amount = !default_rounded_amount)
  27.   +round-corner("bottom-left", !amount)
  28.   +round-corner("bottom-right", !amount)
  29.  
  30. // Round all corners by amount
  31. =round-corners(!amount = !default_rounded_amount)
  32.   border-radius: !amount
  33.   -moz-border-radius= !amount
  34.   -webkit-border-radius= !amount

URL: https://gist.github.com/140430

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.