CODEWITHSUNDEEP
htmlcss
Varun
Varun

Reputation: 1043

border-radius issue with input type text

I have this issue with <input type="text">where I see some extra border in top and left of the input box.

I have this CSS code - 

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

I am attaching the screenshot from chrome. Firefox shows the same thing.Google Chrome Screen Shot

Upvotes: 16

Views: 96983

Answers (5)

Rishidev
Rishidev

Reputation: 7

<input type="text" style="border-radius: 25px;" /> 100% works Try this thing

Upvotes: -4

Tahir77667
Tahir77667

Reputation: 2512

By setting the border: none; will override/nullify the default input css of the text field and then you can add your own custom css to beautify 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 whereas you could achieve the same result in just a single 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

Upvotes: 0

Amit
Amit

Reputation: 2585

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

Border auto is doing that for you. So have your own defined border style.

Upvotes: 4

King Holly
King Holly

Reputation: 986

I noticed in Chrome that the user agent style that causes this specific look is border-style: inset; You can see it in the snippet below. Chrome is handy about indicating the user agent styles. I found two ways to fix this appearance.

  1. Simply set border: 1px solid black; and you notice that the border will lose that inset look.
  2. If you want extra caution, you can set border-style: none; This will cause the border to disappear altogether. You can then set the border as you wish.

I would test any of these solutions across 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;
}

Upvotes: 1

Joe
Joe

Reputation: 8292

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 the default css of the text field will be gone and your ready to style it for yourself.

Demo

Upvotes: 34

Related Questions