Close icon breaks in colorbox - Jquery colorbox

Question

I'm using color box. But the close icon breaks from the corner. Lets see the images.

See in the corner it gets broken. This happens with all the icons inside colorbox.

Here is the close button css & html seen with firebug.

<button id="cboxClose">close</button>

#cboxClose {
    background: url("../img/colorbox/controls.png") no-repeat scroll -25px 0 rgba(0, 0, 0, 0);
    height: 25px;
    position: absolute;
    right: 0;
    text-indent: -9999px;
    top: 0;
    width: 25px;
}

controls.png file is like this

How can I make the round shape exactly in the middle of the button or change this icon into a more beautiful one??

Answer 1

cboxClose {

background: url("../img/colorbox/controls.png") no-repeat scroll -27px -2px rgba(0, 0, 0, 0);
height: 25px;
position: absolute;
right: 0;
text-indent: -9999px;
top: 0;
width: 25px;

}