Border-radius

Round the element's corners.

Usage:

Border-radius property takes one to four arguments with px, em and % values and round the element's corners accordingly. You can make ellipticaly roundeded corners putting two sets of values separated with comma using .elliptical-border-radius class. In order to round a single corner use .round-corner class. This class takes two sets of arguments. First one is a declaration of corner you want to round (top-left, top-right, bottom-right, bottom-left), second one (separated from the first with comma), is a set of values in px, em or % that round choosen corner. Second declaration can have one (for circle rounding) or two values (for elliptical rounding).

For further explanation of the border-radius property, refer to the resources section above.

Resources:

-- http://developer.mozilla.org/en/CSS/border-radius

Browsers support: IE9, Fx3.5, Chrome, Opera, Safari, Opera Mobile, Android Browser

Notable lack of support: IE8-, Opera Mini

Example

1. Round every corner of the element with 10px radius. .border-radius(10px)
2. Round top-left and bottom-right corners by 10px, top-right and bottom-left corners by 20px. .border-radius(10px 20px)
3. Exemplary use of the .elliptical-border-radius class. .elliptical-border-radius(10px 20px 30px, 40px 50px 60px 70px)
4. Round top-right corner by 10px and 20px (elliptical). .round-corner(top-right, 10px 20px) .border-top-right-radius(10px 20px) // Alternate method.
5. Round similar corners. .border-top-radius(20px 10px); // top-left + top-right (elliptical) .border-left-radius(5px); // top-left + bottom-left

If your rounded corners looks bad with borders add this class to your rounded element. -> http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

.border-radius-fix(){.background-clip(padding-box);}

---

Code

.border-radius (@arguments:5px) {
	-webkit-border-radius: @arguments;
	-moz-border-radius: @arguments;
	border-radius: @arguments;
}
// Alternate name for .border-radius.
.round-corners (@arguments:5px) {.border-radius(@arguments);}

.elliptical-border-radius (@arguments1, @arguments2) {
	-webkit-border-radius: @arguments1 ~"/" @arguments2;
	-moz-border-radius: @arguments1 ~"/" @arguments2;
	border-radius: @arguments1 ~"/" @arguments2;
}
.round-corner (top-left, @values){
	-webkit-border-top-left-radius: @values;
	-moz-border-top-left-radius: @values;
	border-top-left-radius: @values;
}
.round-corner (top-right, @values){
	-webkit-border-top-right-radius: @values;
	-moz-border-top-right-radius: @values;
	border-top-right-radius: @values;
}
.round-corner (bottom-right, @values) {
	-webkit-border-bottom-right-radius: @values;
	-moz-border-bottom-right-radius: @values;
	border-bottom-right-radius: @values;
}
.round-corner (bottom-left, @values) {
	-webkit-border-bottom-left-radius: @values;
	-moz-border-bottom-left-radius: @values;
	border-bottom-left-radius: @values;
}
// Another methods to use corner radius.
.border-top-left-radius (@arguments) {.round-corner(top-left,@arguments);}
.border-top-right-radius (@arguments) {.round-corner(top-right,@arguments);}
.border-bottom-right-radius (@arguments) {.round-corner(bottom-right,@arguments);}
.border-bottom-left-radius (@arguments) {.round-corner(bottom-left,@arguments);}

// Round similar corners.
.border-top-radius (@arguments) {.round-corner(top-left,@arguments);.round-corner(top-right,@arguments);}
.border-bottom-radius (@arguments) {.round-corner(bottom-left,@arguments);.round-corner(bottom-right,@arguments);}
.border-left-radius (@arguments) {.round-corner(top-left,@arguments);.round-corner(bottom-left,@arguments);}
.border-right-radius (@arguments) {.round-corner(top-right,@arguments);.round-corner(bottom-right,@arguments);}

// Another classes for the same purpose as above.
.round-top-corners (@arguments) {.border-top-radius(@arguments);}
.round-bottom-corners (@arguments) {.border-bottom-radius(@arguments);}
.round-left-corners (@arguments) {.border-left-radius(@arguments);}
.round-right-corners (@arguments) {.border-right-radius(@arguments);}