Sass（SCSS）のmixinを利用して角丸指定を楽にする

Sassを利用してcssを記述する場合あらかじめ下記のようにmixinを設定しておくと、後で指定が楽になります。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
@mixin border-top-left-radius($radius) {
  -webkit-border-top-left-radius: $radius;
      -moz-border-radius-topleft: $radius;
          border-top-left-radius: $radius;
}
@mixin border-top-right-radius($radius) {
  -webkit-border-top-right-radius: $radius;
      -moz-border-radius-topright: $radius;
          border-top-right-radius: $radius;
}
@mixin border-bottom-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
      -moz-border-radius-bottomright: $radius;
          border-bottom-right-radius: $radius;
}
@mixin border-bottom-left-radius($radius) {
  -webkit-border-bottom-left-radius: $radius;
      -moz-border-radius-bottomleft: $radius;
          border-bottom-left-radius: $radius;
}

これらを利用する場合は例えば下記のように記述します。

.border-round {
@include border-radius(4px); /* 全体の角丸サイズを指定 */
}
.border-round-tl {
@include border-top-left-radius(4px); /* 左上の角丸サイズを指定 */
}
.border-round-tr {
@include border-top-right-radius(4px); /* 右上の角丸サイズを指定 */
}
.border-round-br {
@include border-bottom-right-radius(4px); /* 右下の角丸サイズを指定 */
}
.border-round-bl {
@include border-bottom-left-radius(4px); /* 左上の角丸サイズを指定 */
}