Bootstrap input fields squared

Question

I can't seem to get my corners rounded on any input field on my HTML form. I've tried changing the CSS stylesheet to this:

 * {
  -webkit-border-radius: 4px !important;
     -moz-border-radius: 4px !important;
          border-radius: 4px !important;
  -webkit-border-top: 4px !important;
     -moz-border-top: 4px !important;
          border-top: 4px !important;
  -webkit-border-bottom: 4px !important;
     -moz-border-bottom: 4px !important;
          border-bottom: 4px !important;
}

but that made it so you couldn't see the top and bottom lines. I'm copying the code straight from their site and it's just not formatting right. How can I fix this?

Solution 1

Check that you put form-control class e.g. class="form-control" in your input fields??? like

<input type="text" class="form-control" placeholder="Enter Name">

As I know that was happen when you don't put form-control class

Solution 2

Use the CSS below:

input, input[type="text"]{
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px ;
    border-radius: 4px ;
    border-width: 5px 0px 5px 0px;
    padding: 10px;
}