Cacher is the code snippet organizer for pro developers

body{background: #3C3C3C;color: #7F8C8D;font-size:13px;}
.clearfix:after {content: ".";display: block; clear: both;    visibility: hidden;line-height: 0; height: 0;}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}
h2,h3{text-align:center;}
ul{margin:1em auto;padding:0;list-style:none;width:100%; display:block;text-align:center;}
li{display:inline-block; margin:0.5em;float:left;}


/* basic btn http://getbootstrap.com/ */
.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid;
  border-color:black; /* Fallback */
  border-color: rgba(0, 0, 0, 0);
  white-space: nowrap;
  padding: 0.5em 1em;
  font-size: 1.5em;
  line-height: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  color: #000;
  opacity:1;
  filter: alpha(opacity=100);
  -webkit-transition:all 0.5s ease; 
  transition:all 0.5s ease;
}
.btn:hover, 
.btn:focus {
  zoom:1;
  filter: alpha(opacity=50);
  opacity: 0.5;
  text-decoration: none;
  -webkit-transition:all 0.5s ease; 
  transition:all 0.5s ease;
}
.btn:before,
.btn:after{
  content:"";
  position:absolute;
  top:0;
  left:-1em;
  width:0;
  height:2em;
  padding:0;
  font-size: 1.5em;
  line-height: 1;
  -webkit-transition:all 0.5s ease; 
  transition:all 0.5s ease;
  background:black;
  background: rgba(0, 0, 0, 0.2);
}
.btn:hover:before,
.btn:hover:after{
  width:100%;
  left:0;
  border:1px solid black;
  border-color:rgba(0, 0, 0, 0.2);
  -webkit-transition:all 0.5s ease; 
  transition:all 0.5s ease;
}
.radius{
  border-radius:5px;
}

var colors =['AliceBlue','AntiqueWhite','Aqua','Aquamarine','Azure','Beige','Bisque','Black','BlanchedAlmond','Blue','BlueViolet','Brown','BurlyWood','CadetBlue','Chartreuse','Chocolate','Coral','CornflowerBlue','Cornsilk','Crimson','Cyan','DarkBlue','DarkCyan','DarkGoldenRod','DarkGray','DarkGreen','DarkKhaki','DarkMagenta','DarkOliveGreen','DarkOrange','DarkOrchid','DarkRed','DarkSalmon','DarkSeaGreen','DarkSlateBlue','DarkSlateGray','DarkTurquoise','DarkViolet','DeepPink','DeepSkyBlue','DimGray','DodgerBlue','FireBrick','FloralWhite','ForestGreen','Fuchsia','Gainsboro','GhostWhite','Gold','GoldenRod','Gray','Green','GreenYellow','HoneyDew','HotPink','IndianRed ','Indigo ','Ivory','Khaki','Lavender','LavenderBlush','LawnGreen','LemonChiffon','LightBlue','LightCoral','LightCyan','LightGoldenRodYellow','LightGray','LightGreen','LightPink','LightSalmon','LightSeaGreen','LightSkyBlue','LightSlateGray','LightSteelBlue','LightYellow','Lime','LimeGreen','Linen','Magenta','Maroon','MediumAquaMarine','MediumBlue','MediumOrchid','MediumPurple','MediumSeaGreen','MediumSlateBlue','MediumSpringGreen','MediumTurquoise','MediumVioletRed','MidnightBlue','MintCream','MistyRose','Moccasin','NavajoWhite','Navy','OldLace','Olive','OliveDrab','Orange','OrangeRed','Orchid','PaleGoldenRod','PaleGreen','PaleTurquoise','PaleVioletRed','PapayaWhip','PeachPuff','Peru','Pink','Plum','PowderBlue','Purple','Red','RosyBrown','RoyalBlue','SaddleBrown','Salmon','SandyBrown','SeaGreen','SeaShell','Sienna','Silver','SkyBlue','SlateBlue','SlateGray','Snow','SpringGreen','SteelBlue','Tan','Teal','Thistle','Tomato','Turquoise','Violet','Wheat','White','WhiteSmoke','Yellow'];

var brd = '',brd_radius = '',bck = '';
for (var i = 0; i < colors.length; i++) {
  // border color
  brd += '<li><a href="#" class="btn" style="color:'+
    colors[i]+';border-color:'+
    colors[i]+';">'+
    colors[i]+'</a></li>';
  
  // border color with radius
  brd_radius += '<li><a href="#" class="btn radius" style="color:'+
    colors[i]+';border-color:'+colors[i]+';">'+colors[i]+'</a></li>';
  
  // background
  bck += '<li><a href="#" class="btn radius" style="background:'+
    colors[i]+';">'+colors[i]+'</a></li>';
  
  // if color contains black in background colors;
  if(colors[i] === 'Black'){
     bck = '<li><a href="#" class="btn radius" style="background:'+
       colors[i]+';color:white;">'+colors[i]+'</a></li>';   
  }
}  

document.querySelector('.brd').innerHTML = brd;
document.querySelector('.bck').innerHTML = bck;
document.querySelector('.brd_radius').innerHTML = brd_radius;

<h2>Web colors</h2>
<h3>Border color</h3>
<div class="brd clearfix"></div>

<h3>Border color with class radius</h3>
<div class="brd_radius clearfix"></div>

<h3>Background with radius</h3>
<div class="bck clearfix"></div>