Q:

Display rectangular background instead of circular background

We want to add a Circular background for an image like this: http://jsfiddle.net/rkEMR/8679/
So I followed link1 , I am trying below code in the link2, but its displaying like below image, background is not circluar:

.product-options ul.options-list .label>label.colors 
{  
width: 30px; 
height: 30px; 
border-radius: 50%; 
background-size: cover !important; 
display: block; 
padding: 0 !important; 
font-size: 0; 
border: 0px solid #d1d1d1 !important;
}

Edit
script
var jQuery = $.noConflict(); 
jQuery(document).ready(function(){ 
var inner = Array(); 
inner = jQuery(" .product-options ul.options-list .label>label"); 
for (i=0;i<inner.length;i++){ 
var classN = inner[i].innerText; 
if (classN=="Black" || classN=="Green" || classN=="Red" || classN=="Purple" || classN=="Orange" || classN=="Pink" || classN=="Brown"){ 
inner.eq(i).addClass("colors"); 
classN = classN.toLowerCase(); 
var urlB = "http://stylebaby.com/media/catalog/custom/"+classN+".png"; 
inner.eq(i).css('background-image', 'url(' + urlB + ')'); 
} 
} 
});

A:

Provide a fixed height and width to the <span class="label" here. Preferably give them the same value for the element to be a square.
Apply margin-top to the label element for it to be positioned in the center of the span
Refer to attached code:
.label {
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

.label label {
    margin-top: 3px !important;
}

The result should be like in the attached screenshot: 

