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"

View the Source for this module on Github.

Examples

Border radius
css3 mixin for border-radius

Imports

The following sass files are automatically imported when you import this file:

  1. CSS3 Utilities

Configurable Variables help

Value
5px

Mixins

View Source: Sass | SCSS 

=border-radius($radius: $default-border-radius, $vertical-radius: false)
  @if $vertical-radius
    // Webkit doesn't understand the official shorthand syntax for specifying
    // a vertical radius unless so in case there's several we only take the first.
    +experimental(border-radius, first-value-of($radius) first-value-of($vertical-radius), not -moz, -webkit, not -o, not -ms, not -khtml, not official)
    +experimental("border-radius", $radius unquote("/") $vertical-radius, -moz, not -webkit, -o, -ms, -khtml, official)
  @else
    +experimental(border-radius, $radius)

@mixin border-radius($radius: $default-border-radius, $vertical-radius: false) {
  @if $vertical-radius {
    // Webkit doesn't understand the official shorthand syntax for specifying
    // a vertical radius unless so in case there's several we only take the first.
    @include experimental(border-radius, first-value-of($radius) first-value-of($vertical-radius), not -moz, -webkit, not -o, not -ms, not -khtml, not official);
    @include experimental("border-radius", $radius unquote("/") $vertical-radius, -moz, not -webkit, -o, -ms, -khtml, official); }
  @else {
    @include experimental(border-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 {

 -webkit-border-radius: 4px 4px;
 -moz-border-radius: 4px / 4px;
 -o-border-radius: 4px / 4px;
 -ms-border-radius: 4px / 4px;
 -khtml-border-radius: 4px / 4px;
 border-radius: 4px / 4px; }

.compound {

 -webkit-border-radius: 2px 3px;
 -moz-border-radius: 2px 5px / 3px 6px;
 -o-border-radius: 2px 5px / 3px 6px;
 -ms-border-radius: 2px 5px / 3px 6px;
 -khtml-border-radius: 2px 5px / 3px 6px;
 border-radius: 2px 5px / 3px 6px; }

.crazy {

 -webkit-border-radius: 1px 2px;
 -moz-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
 -o-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
 -ms-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
 -khtml-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
 border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; }
View Source: Sass | SCSS 

=border-corner-radius($vert, $horz, $radius: $default-border-radius)
  // Support for mozilla's syntax for specifying a corner
  +experimental(unquote("border-radius-#{$vert}#{$horz}"), $radius, -moz, not -webkit, not -o, not -ms, not -khtml, not official)
  +experimental("border-#{$vert}-#{$horz}-radius", $radius, not -moz, -webkit, -o, -ms, -khtml, official)

@mixin border-corner-radius($vert, $horz, $radius: $default-border-radius) {
  // Support for mozilla's syntax for specifying a corner
  @include experimental(unquote("border-radius-#{$vert}#{$horz}"), $radius, -moz, not -webkit, not -o, not -ms, not -khtml, not official);
  @include experimental("border-#{$vert}-#{$horz}-radius", $radius, not -moz, -webkit, -o, -ms, -khtml, official); }

Round radius at position by amount.

  • legal values for $vert: top, bottom
  • legal values for $horz: left, right
View Source: Sass | SCSS 

=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: Sass | SCSS 

=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: Sass | SCSS 

=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: Sass | SCSS 

=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: Sass | SCSS 

=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: Sass | SCSS 

=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: Sass | SCSS 

=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: Sass | SCSS 

=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