megwoo
6/24/2015 - 5:11 AM

Rounded corners

Rounded corners

// sass
-webkit-border-radius: $default-border-radius;
-moz-border-radius: $default-border-radius;
-ms-border-radius: $default-border-radius;
-o-border-radius: $default-border-radius;
border-radius: $default-border-radius;

/* Prevent background color leak outs */
-webkit-background-clip: padding-box; 
-moz-background-clip: padding; 
background-clip: padding-box;

// reset
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;

// circle
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;

// left & bottom
-webkit-border-top-left-radius: $default-border-radius;
-webkit-border-bottom-left-radius: $default-border-radius;
-moz-border-radius-topleft: $default-border-radius;
-moz-border-radius-bottomleft: $default-border-radius;
border-top-left-radius: $default-border-radius;
border-bottom-left-radius: $default-border-radius;

// right & bottom
-webkit-border-top-right-radius: $default-border-radius;
-webkit-border-bottom-right-radius: $default-border-radius;
-moz-border-radius-topright: $default-border-radius;
-moz-border-radius-bottomright: $default-border-radius;
border-top-right-radius: $default-border-radius;
border-bottom-right-radius: $default-border-radius;

Generator: http://border-radius.com/