⊗mkLsBsVPRC 36 of 41 menu

Using Vendor Prefixes to Create Rounded Corners in LESS

Let's make a function that will round corners cross-browser:

.radius(@radius) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

Let's use our function:

div {
	.radius(10px);
}

Compilation result:

div {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}