Css rounded text box

Question

I found this code here: http://www.cssportal.com/form-elements/text-box.htm But the problem is that you can still see the rectangular shape of the text field whenever you click on it. What will be this decision? So the backlight will come with an image with rounded corners

/* Rounded Corner */
.tb5 {
    background: url(images/rounded.gif) no-repeat top left;
    height: 22px;
    width: 230px;
}
.tb5a {
    border: 0;
    width:220px;
    margin-top:3px;
}

Answer 1

This should only happen in some browsers, such as Google Chrome, it is intended to provide usability and accessibility, but it can cause problems with some style. What you want to do is remove the dynamic paths as follows:

input[type="text"] { 
    outline: none;
} 

, , psedo- : focus

input[type="text"]:focus { 
    background: url(images/rounded-focused.gif) no-repeat top left;
}