An example of how to create a SASS mixin for adding different types of rounded corners to an element (i.e. top left , top right, bottom left, etc rounded corners)

RoundedCornersWithASassMixin.txt

HTML
=========================================================

<div class="my-element">
  Hey, this is a blue rectangle with 5px rounded corners on all sides.
</a>


SASS/CSS
=========================================================

/* Defining the Mixin */ 
@mixin border-radius($radius,$position) {
  
  @if $position == bottomLeft {
    -webkit-border-bottom-left-radius: $radius;
    -moz-border-bottom-left-radius: $radius;
    -o-border-bottom-left-radius: $radius;
    -ms-border-bottom-left-radius: $radius;
    border-bottom-left-radius: $radius;    
  }
  
  @if $position == bottomRight {
    -webkit-border-bottom-right-radius: $radius;
    -moz-border-bottom-right-radius: $radius;
    -o-border-bottom-right-radius: $radius;
    -ms-border-bottom-right-radius: $radius;
    border-bottom-right-radius: $radius;
  }

  @if $position == topLeft {
    -webkit-border-top-left-radius: $radius;
    -moz-border-top-left-radius: $radius;
    -o-border-top-left-radius: $radius;
    -ms-border-top-left-radius: $radius;
    border-top-left-radius: $radius;
  }

  @if $position == topRight {
    -webkit-border-top-right-radius: $radius;
    -moz-border-top-right-radius: $radius;
    -o-border-top-right-radius: $radius;
    -ms-border-top-right-radius: $radius;
    border-top-right-radius: $radius;
  }

  @if $position == all {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -o-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
  }

}

/* Now we're styling our DIV tag so it looks like a rectangle with rounded corners */
.my-element {
  width: 200px;
  height: 50px;
  background: blue;
  @include border-radius(5px,all);
}