Demo: Border radius

<div class='border-radius-example' id='border-radius'>
  <p>
    Box with all corners rounded
  </p>
</div>
<div class='border-radius-example' id='border-radius-top-left'>
  <p>
    Box with only top left corner rounded
  </p>
</div>
<div class='border-radius-example' id='border-radius-top-right'>
  <p>
    Box with only top right corner rounded
  </p>
</div>
<div class='border-radius-example' id='border-radius-bottom-left'>
  <p>
    Box with only bottom left corner rounded
  </p>
</div>
<div class='border-radius-example' id='border-radius-bottom-right'>
  <p>
    Box with only bottom right corner rounded
  </p>
</div>
<div class='border-radius-example' id='border-radius-top'>
  <p>
    Box with top corners rounded
  </p>
</div>
<div class='border-radius-example' id='border-radius-bottom'>
  <p>
    Box with bottom corners rounded
  </p>
</div>
<div class='border-radius-example' id='border-radius-left'>
  <p>
    Box with left corners rounded
  </p>
</div>
<div class='border-radius-example' id='border-radius-right'>
  <p>
    Box with right corners rounded
  </p>
</div>
<div class='border-radius-example' id='border-radius-combo'>
  <p>
    Box with different roundings for top/bottom and left/right
  </p>
</div>

#border-radius.border-radius-example
  %p
    Box with all corners rounded

#border-radius-top-left.border-radius-example
  %p
    Box with only top left corner rounded

#border-radius-top-right.border-radius-example
  %p
    Box with only top right corner rounded

#border-radius-bottom-left.border-radius-example
  %p
    Box with only bottom left corner rounded

#border-radius-bottom-right.border-radius-example
  %p
    Box with only bottom right corner rounded

#border-radius-top.border-radius-example
  %p
    Box with top corners rounded

#border-radius-bottom.border-radius-example
  %p
    Box with bottom corners rounded

#border-radius-left.border-radius-example
  %p
    Box with left corners rounded

#border-radius-right.border-radius-example
  %p
    Box with right corners rounded

#border-radius-combo.border-radius-example
  %p
    Box with different roundings for top/bottom and left/right

@import "compass/css3";

@import "compass/utilities";

#demo {
  @include clearfix;
}

.border-radius-example {
  width: 125px;
  height: 125px;
  background: red;
  margin: 20px;
  float: left;
  padding: 5px;
}

#border-radius {
  @include border-radius(25px);
}

#border-radius-top-left {
  @include border-top-left-radius(25px);
}

#border-radius-top-right {
  @include border-top-right-radius(25px);
}

#border-radius-bottom-left {
  @include border-bottom-left-radius(25px);
}

#border-radius-bottom-right {
  @include border-bottom-right-radius(25px);
}

#border-radius-top {
  @include border-top-radius(25px);
}

#border-radius-bottom {
  @include border-bottom-radius(25px);
}

#border-radius-left {
  @include border-left-radius(25px);
}

#border-radius-right {
  @include border-right-radius(25px);
}

#border-radius-combo {
  @include border-corner-radius(top, left, 40px);
  @include border-corner-radius(top, right, 5px);
  @include border-corner-radius(bottom, left, 15px);
  @include border-corner-radius(bottom, right, 30px);
}

@import compass/css3, compass/utilities

#demo
  +clearfix

.border-radius-example
  width: 125px
  height: 125px
  background: red
  margin: 20px
  float: left
  padding: 5px

#border-radius
  +border-radius(25px)

#border-radius-top-left
  +border-top-left-radius(25px)

#border-radius-top-right
  +border-top-right-radius(25px)

#border-radius-bottom-left
  +border-bottom-left-radius(25px)

#border-radius-bottom-right
  +border-bottom-right-radius(25px)

#border-radius-top
  +border-top-radius(25px)

#border-radius-bottom
  +border-bottom-radius(25px)

#border-radius-left
  +border-left-radius(25px)

#border-radius-right
  +border-right-radius(25px)

#border-radius-combo
  +border-corner-radius(top, left, 40px)
  +border-corner-radius(top, right, 5px)
  +border-corner-radius(bottom, left, 15px)
  +border-corner-radius(bottom, right, 30px)

#demo{overflow:hidden;*zoom:1}.border-radius-example{width:125px;height:125px;background:red;margin:20px;float:left;padding:5px}#border-radius{-webkit-border-radius:25px;-moz-border-radius:25px;-ms-border-radius:25px;-o-border-radius:25px;border-radius:25px}#border-radius-top-left{-moz-border-radius-topleft:25px;-webkit-border-top-left-radius:25px;border-top-left-radius:25px}#border-radius-top-right{-moz-border-radius-topright:25px;-webkit-border-top-right-radius:25px;border-top-right-radius:25px}#border-radius-bottom-left{-moz-border-radius-bottomleft:25px;-webkit-border-bottom-left-radius:25px;border-bottom-left-radius:25px}#border-radius-bottom-right{-moz-border-radius-bottomright:25px;-webkit-border-bottom-right-radius:25px;border-bottom-right-radius:25px}#border-radius-top{-moz-border-radius-topleft:25px;-webkit-border-top-left-radius:25px;border-top-left-radius:25px;-moz-border-radius-topright:25px;-webkit-border-top-right-radius:25px;border-top-right-radius:25px}#border-radius-bottom{-moz-border-radius-bottomleft:25px;-webkit-border-bottom-left-radius:25px;border-bottom-left-radius:25px;-moz-border-radius-bottomright:25px;-webkit-border-bottom-right-radius:25px;border-bottom-right-radius:25px}#border-radius-left{-moz-border-radius-topleft:25px;-webkit-border-top-left-radius:25px;border-top-left-radius:25px;-moz-border-radius-bottomleft:25px;-webkit-border-bottom-left-radius:25px;border-bottom-left-radius:25px}#border-radius-right{-moz-border-radius-topright:25px;-webkit-border-top-right-radius:25px;border-top-right-radius:25px;-moz-border-radius-bottomright:25px;-webkit-border-bottom-right-radius:25px;border-bottom-right-radius:25px}#border-radius-combo{-moz-border-radius-topleft:40px;-webkit-border-top-left-radius:40px;border-top-left-radius:40px;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px;-moz-border-radius-bottomleft:15px;-webkit-border-bottom-left-radius:15px;border-bottom-left-radius:15px;-moz-border-radius-bottomright:30px;-webkit-border-bottom-right-radius:30px;border-bottom-right-radius:30px}