CODEWITHSUNDEEP
htmlcss
Khawar Ali
Khawar Ali

Reputation: 3506

Border-radius shows only two sides in the form element text

I have made a form element of type text and I want it to have border-radius of 5px, but when I write border-radius:5px, it shows the box like this:

enter image description here

Why is it showing a solid border instead of just changing the corners, and why only 2 sides?

My html and css is mentioned below:

<form class="textBoxForm">
<input class="textBox" type="text" value="(123)456-7890" style="width:215px; height:38px; font-size:23px; padding-left:12px;padding-top:0px;color:#666666">
</form>


.textBox{
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
vertical-align:middle;
border-radius:5px;
}

Please guide me about this.

Upvotes: 1

Views: 86

Answers (1)

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

You have to give Border to avoid this shadow effect to the class .textBox

 border:1px #ccc solid;

Demo http://jsfiddle.net/rr6u6rqs/2/

Upvotes: 2

Related Questions