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

@import 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 {
  -moz-border-radius: 25px;
  -webkit-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;
}