Recently, I’ve been using a lot of rounded corners in my layouts. Declaring each rounded corner in each of three different ways gets old really fast. So, I created a set of mixins. Sass mixins are almost like functions. You define a mixin with a series of CSS properties and then include that mixin in a selector. Mixins can even take parameters (including default values). The rounded corner mixins I created are pretty simple:

=round-top-left(!radius)
  :-moz-border-radius-topleft = !radius
  :-webkit-border-top-left-radius = !radius
  :border-top-left-radius = !radius
=round-top-right(!radius)
  :-moz-border-radius-topright = !radius
  :-webkit-border-top-right-radius = !radius
  :border-top-right-radius = !radius
=round-bottom-left(!radius)
  :-moz-border-radius-bottomleft = !radius
  :-webkit-border-bottom-left-radius = !radius
  :border-bottom-left-radius = !radius
=round-bottom-right(!radius)
  :-moz-border-radius-bottomright = !radius
  :-webkit-border-bottom-right-radius = !radius
  :border-bottom-right-radius = !radius
 
=round-top(!radius)
  +round-top-left(!radius)
  +round-top-right(!radius)
=round-bottom(!radius)
  +round-bottom-left(!radius)
  +round-bottom-right(!radius)
=round-left(!radius)
  +round-top-left(!radius)
  +round-bottom-left(!radius)
=round(!radius)
  :-moz-border-radius = !radius
  :-webkit-border-radius = !radius
  :border-radius = !radius

Now, I can just @include round.sass in any Sass file I want to use rounded corners in. After that, adding rounded corners is as easy as:

.something_rounded
  +round(1em)

Which generates the following CSS:

.something_rounded {
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border-radius: 1em; }

To round just some corners:

.something_somewhat_rounded
  +round-top-left(2px)

Will generate the following CSS:

.something_somewhat_rounded {
  -moz-border-radius-topleft: 2px;
  -webkit-border-top-left-radius: 2px;
  border-top-left-radius: 2px; }

Easy-peasy! Not only do I no longer have to include the three different browser definitions and remember which ones format the corners in which way (radius-topleft vs. top-left-radius), but when I want to change the value, I only have to change it in one place.