wriver4
11/23/2012 - 4:32 PM

A CodePen by Eky. Border Radiuses Mixin in LESS

A CodePen by Eky. Border Radiuses Mixin in LESS

%h1 Border Radiuses Mixin in LESS
.box.rounded
.box.top
.box.bottom
.box.left
.box.right
.box.top-and-bottom
.box.left-and-right
.box.all
// Examples
/*
  .rounded { .border-radius(@radius) }

  .top-left     { .border-radius(top-left, @radius) }
  .top-right    { .border-radius(top-right, @radius) }
  .bottom-right { .border-radius(bottom-right, @radius) }
  .bottom-left  { .border-radius(bottom-left, @radius) }

	.top    { .border-radius(top, @radius) }
	.bottom { .border-radius(bottom, @radius) }
	.left   { .border-radius(left, @radius) }
	.right  { .border-radius(right, @radius) }

	.top-and-bottom { .border-radius(@radius, @radius2) }
	// or 
	.top-and-bottom { .border-radius(vert, @radius, @radius2) }
	.left-and-right { .border-radius(horz, @radius, @radius2) }

	.all { .border-radius(@top-left, @top-right, @bottom-right, @bottom-left) }
  
  // ellipse arc, use escape function
  .ellipse { .border-radius( e('10px/20px') ) }
  .ellipse { .border-radius( e(%("%d/%d", @radius, @radius2)) ) }
*/
body{
  padding-top: 20px;
  text-align: center;
  background: #111;
  color: #ddd;
}

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

  .border-radius(top-left, @radius) {
		-webkit-border-top-left-radius: @radius;
		-moz-border-radius-topleft: @radius;
		border-top-left-radius: @radius;
	}
	.border-radius(top-right, @radius) {
		-webkit-border-top-right-radius: @radius;
		-moz-border-radius-topright: @radius;
		border-top-right-radius: @radius;
	}
	.border-radius(bottom-right, @radius) {
		-webkit-border-bottom-right-radius: @radius;
		-moz-border-radius-topright: @radius;
		border-bottom-right-radius: @radius;
	}
	.border-radius(bottom-left, @radius) {
		-webkit-border-bottom-left-radius: @radius;
		-moz-border-radius-bottomleft: @radius;
		border-bottom-left-radius: @radius;
	}

	.border-radius(top, @radius) {
		.border-radius(top-right, @radius);
		.border-radius(top-left, @radius);
	}
	.border-radius(bottom, @radius) {
		.border-radius(bottom-right, @radius);
		.border-radius(bottom-left, @radius);
	}
	.border-radius(left, @radius) {
		.border-radius(top-left, @radius);
		.border-radius(bottom-left, @radius);
	}
	.border-radius(right, @radius) {
		.border-radius(top-right, @radius);
		.border-radius(bottom-right, @radius);
	}

	.border-radius(@top-radius, @bottom-radius) when( isnumber(@top-radius) ) {
		.border-radius(@top-radius);
		.border-radius(bottom-right, @bottom-radius);
		.border-radius(bottom-left, @bottom-radius);
	}
	.border-radius(vert, @left-radius, @right-radius) {
		.border-radius(@left-radius, @right-radius);
	}
	.border-radius(horz, @left-radius, @right-radius) {
		.border-radius(@left-radius);
		.border-radius(top-right, @right-radius);
		.border-radius(bottom-right, @right-radius);
	}

	.border-radius(@top-left-radius, @top-right-radius, @bottom-right-radius, @bottom-left-radius) {
		.border-radius(top-left, @top-left-radius);
		.border-radius(top-right, @top-right-radius);
		.border-radius(bottom-right, @bottom-right-radius);
		.border-radius(bottom-left, @bottom-left-radius);
}

// Examples
.box{
	width: 50px;
	height: 50px;
	display: inline-block;
  
  @radius: 10px;
  @radius2: 25px;
  
  &.rounded{
    background: red;
    .border-radius(@radius);
  }
  &.top{
    background: orange;
    .border-radius(top, @radius);
  }
  &.bottom{
    background: yellow;
    .border-radius(bottom, @radius);
  }
  &.left{
    background: green;
    .border-radius(left, @radius);
  }
  &.right{
    background: cyan;
    .border-radius(right, @radius);
  }
  &.top-and-bottom{
    background: blue;
    .border-radius(@radius, @radius2);
  }
  &.left-and-right{
    background: indigo;
    .border-radius(horz, @radius, @radius2);
  }
  &.all{
    background: purple;
    .border-radius(@radius - 5px, @radius, @radius + 5px, @radius2);
  }
}