Border Radius Problem with Input Type Text

Question

I have this problem with <input type="text"> , where I see an extra border at the top and left of the input window.

I have this CSS code -

 #add{ width: 60%; height: 25px; margin: 0 auto; border: auto; border-radius: 10px; } 

I am attaching a screenshot from chrome. Firefox shows the same thing.

Answer 1

Try

  #add{ width: 60%; height: 25px; margin: 0 auto; border: none; /* <-- This thing here */ border:solid 1px #ccc; border-radius: 10px; } 

By setting it to border:none , by default the css of the text field will disappear, and you are ready to style it for yourself.

Demo

Answer 2

 #add { width: 60%; height: 25px; margin: 0 auto; border: 1px solid black; border-radius: 10px; } 

Border auto does it for you. So have your own specific border style.

Answer 3

In Chrome, I noticed that the style of the user agent that invokes this particular look is border-style: inset; . You can see it in the fragment below. Chrome is useful for specifying user agent styles. I found two ways to fix this occurrence.

1. Just set border: 1px solid black; , and you will notice that the border will lose this appearance.
2. If you need extra care, you can set border-style: none; . This will cause the border to completely disappear. Then you can set the border as you like.

I would test any of these solutions in different browsers.

Chrome user agent stylesheet:

 input { -webkit-appearance: textfield; background-color: white; -webkit-rtl-ordering: logical; cursor: text; padding: 1px; border-width: 2px; border-style: inset; /* This rule adds the inset border */ border-color: initial; border-image: initial; } 

Answer 4

By setting border: none; , you override / invalidate the default input css for the text field, and then you can add your own css to decorate the input text element, like so:

 border: none; /*removes the default css*/ border: 1px solid black; /*your custom css*/ border-radius: 10px; /*your-border radius*/ 

However, the above method is unnecessarily tedious , while you can achieve the same result in just one line with:

 border-radius: 10px !important; /*this simply does the trick!!!*/ **Note:** The !important property in CSS is used to provide more weight (importance) than normal property. It means that 'this is important', ignore all the subsequent rules