Q
Version: 1.0.1
Source on Github

Compass Border Radius

The border-radius mixin is used to give a block element rounded corners. It automatically outputs the correct vendor specific syntax for each browser (e.g. -webkit-border-radius and -moz-border-radius). See CSS3 spec: border-radius.

This file can be imported using: @import "compass/css3/border-radius"

Examples

Border radius
css3 mixin for border-radius

Imports

  1. Browser Support – Provides configuration options for the Compass Browser Support Matrix.

Configurable Variables help

$graceful-usage-threshold

The the user threshold for border-radius support. Defaults to $graceful-usage-threshold

5px

The length of a border-radius to be used by default.

Mixins

view source 

=border-radius($radius: $default-border-radius, $vertical-radius: false)
  +with-each-prefix(border-radius, $border-radius-threshold)
    @if $current-prefix == -webkit
      // Legacy Webkit didn't understand the official shorthand syntax for specifying a vertical radius.
      $legacy-webkit-radius: first-value-of($radius)
      @if $vertical-radius
        $legacy-webkit-radius: append($legacy-webkit-radius, first-value-of($vertical-radius))
      +prefix-prop(border-radius, $legacy-webkit-radius)
    @else
      // Official syntax for everyone else
      +prefix-prop(border-radius, if($vertical-radius, #{$radius} / #{$vertical-radius}, $radius))

@mixin border-radius($radius: $default-border-radius, $vertical-radius: false) {
  @include with-each-prefix(border-radius, $border-radius-threshold) {
    @if $current-prefix == -webkit {
      // Legacy Webkit didn't understand the official shorthand syntax for specifying a vertical radius.
      $legacy-webkit-radius: first-value-of($radius);
      @if $vertical-radius {
        $legacy-webkit-radius: append($legacy-webkit-radius, first-value-of($vertical-radius));
      }
      @include prefix-prop(border-radius, $legacy-webkit-radius);
    }
    @else {
      // Official syntax for everyone else
      @include prefix-prop(border-radius, if($vertical-radius, #{$radius} / #{$vertical-radius}, $radius));
    }
  }
}

Round all corners by a specific amount, defaults to value of $default-border-radius.

When two values are passed, the first is the horizontal radius and the second is the vertical radius.

Note: webkit does not support shorthand syntax for several corners at once. So in the case where you pass several values only the first will be passed to webkit.

Examples:

.simple   { @include border-radius(4px, 4px); }
.compound { @include border-radius(2px 5px, 3px 6px); }
.crazy    { @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px)}

Which generates:

.simple {
  -moz-border-radius: 4px / 4px;
  -webkit-border-radius: 4px 4px;
  border-radius: 4px / 4px; }

.compound {
  -moz-border-radius: 2px 5px / 3px 6px;
  -webkit-border-radius: 2px 3px;
  border-radius: 2px 5px / 3px 6px; }

.crazy {
  -moz-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
  -webkit-border-radius: 1px 2px;
  border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; }
view source 

=border-corner-radius($vert, $horz, $radius: $default-border-radius)
  +with-each-prefix(border-radius, $border-radius-threshold)
    @if $current-prefix == -moz
      // Support for mozilla's syntax for specifying a corner
      +prefix-prop(unquote("border-radius-#{$vert}#{$horz}"), $radius)
    @else
      // Official syntax for everyone else
      +prefix-prop("border-#{$vert}-#{$horz}-radius", $radius)

@mixin border-corner-radius($vert, $horz, $radius: $default-border-radius) {
  @include with-each-prefix(border-radius, $border-radius-threshold) {
    @if $current-prefix == -moz {
      // Support for mozilla's syntax for specifying a corner
      @include prefix-prop(unquote("border-radius-#{$vert}#{$horz}"), $radius);
    }
    @else {
      // Official syntax for everyone else
      @include prefix-prop("border-#{$vert}-#{$horz}-radius", $radius);
    }
  }
}

Round radius at position by amount.

  • legal values for $vert: top, bottom
  • legal values for $horz: left, right
view source 

=border-top-left-radius($radius: $default-border-radius)
  +border-corner-radius(top, left, $radius)

@mixin border-top-left-radius($radius: $default-border-radius) {
  @include border-corner-radius(top, left, $radius);
}

Round top-left corner only

view source 

=border-top-right-radius($radius: $default-border-radius)
  +border-corner-radius(top, right, $radius)

@mixin border-top-right-radius($radius: $default-border-radius) {
  @include border-corner-radius(top, right, $radius);
}

Round top-right corner only

view source 

=border-bottom-left-radius($radius: $default-border-radius)
  +border-corner-radius(bottom, left, $radius)

@mixin border-bottom-left-radius($radius: $default-border-radius) {
  @include border-corner-radius(bottom, left, $radius);
}

Round bottom-left corner only

view source 

=border-bottom-right-radius($radius: $default-border-radius)
  +border-corner-radius(bottom, right, $radius)

@mixin border-bottom-right-radius($radius: $default-border-radius) {
  @include border-corner-radius(bottom, right, $radius);
}

Round bottom-right corner only

view source 

=border-top-radius($radius: $default-border-radius)
  +border-top-left-radius($radius)
  +border-top-right-radius($radius)

@mixin border-top-radius($radius: $default-border-radius) {
  @include border-top-left-radius($radius);
  @include border-top-right-radius($radius);
}

Round both top corners by amount

view source 

=border-right-radius($radius: $default-border-radius)
  +border-top-right-radius($radius)
  +border-bottom-right-radius($radius)

@mixin border-right-radius($radius: $default-border-radius) {
  @include border-top-right-radius($radius);
  @include border-bottom-right-radius($radius);
}

Round both right corners by amount

view source 

=border-bottom-radius($radius: $default-border-radius)
  +border-bottom-left-radius($radius)
  +border-bottom-right-radius($radius)

@mixin border-bottom-radius($radius: $default-border-radius) {
  @include border-bottom-left-radius($radius);
  @include border-bottom-right-radius($radius);
}

Round both bottom corners by amount

view source 

=border-left-radius($radius: $default-border-radius)
  +border-top-left-radius($radius)
  +border-bottom-left-radius($radius)

@mixin border-left-radius($radius: $default-border-radius) {
  @include border-top-left-radius($radius);
  @include border-bottom-left-radius($radius);
}

Round both left corners by amount