Q
Version: 1.1.alpha.0

Demo: Border radius

Box with all corners rounded

Box with only top left corner rounded

Box with only top right corner rounded

Box with only bottom left corner rounded

Box with only bottom right corner rounded

Box with top corners rounded

Box with bottom corners rounded

Box with left corners rounded

Box with right corners rounded

Box with different roundings for top/bottom and left/right

<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;
}