CODEWITHSUNDEEP
htmlcss
Piyush Seofaceup
Piyush Seofaceup

Reputation: 61

box-sizing: border-box; is not properly working

I am trying to learn css and html5 and got stuck at form . I got a code from w3schools that if i want to make form at rectangular in shape i should use box-sizing: border-box in my css code but its happening here Can you please have a take a look on my code :

#modal_form input[type=text] {
    width: 320px;
	height: 40px;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
<form id="modal_form">
        <input type="text" name="name" class="name" placeholder="Full Name"><br>
       <input type="text" name="email" class="email" placeholder="Email address"><br>
        <input type="text" name="phone" class="email" placeholder="Phone no"><br>
       <input type="text" name="website" class="email" placeholder="Your Website"><br>
        <input type="text" name="question" class="email" placeholder="Your Question??">
        <center><input  class="form-control" type="submit" name="contact" id="submit" value="Send Message"></center> 
      </form>

Here its coming properly but in my code its coming like this :

Preview

May be i am using old template with earlier release of bootstrap and other , So what would be alternative

Thanks in advance@!!!

Upvotes: 0

Views: 1361

Answers (1)

Emonadeo
Emonadeo

Reputation: 504

box-sizing is used to manipulate the collision-box of elements, not the visual shape.

What you are looking for might be border-radius which I think bootstrap applies to your inputs. You should be able to fix it by adding border-radius: 0 to your CSS code. Since here on Stack is no bootstrap the inputs do not render with rounded corners.

Upvotes: 1

Related Questions