border-radius property with input text tag not working properly in Chrome browser
css, google-chrome, html
Solution
Try adding `outline: 0;` to the input
See this jsFiddle for an example
Problem
I am trying to use border-radius property with input text tag to get rounded corner. I am able to achieve rounded corner in all the browsers i.e. Firefox,IE and in Chrome but I see one problem in Chrome. In chrome I am able to see one rectangular box along with the rounded textbox. Can anyone please tell me what is the reason for this and how can I remove the rectangular box? my Chrome version is 31.0.1650.63m The html code that I am using to test is given below- ``` <!DOCTYPE html> <html> <head> <style> input { border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:200px; border-radius:25px; } </style> </head> <body> <input type="text"></input> </body> </html> ```