How do I change the border of a text field via CSS?

Question

I want to change the borders of a text field, they should be rounded off. It doesn't work like this:

<div id="text-field"><input type="text"></div>
<style>
#text-field {
border-radius: 10px;
}
</style>

Does anyone know how to fix this?

Thanks!

Answer 1

Here, you are trying to style the div(which has no background, no width, no height, so you wont see any changes). You have to assign a class(recommanded) or an id to the text input itself and style it.

<style>
.my_input{

border: 1px solid green; /*optional*/
border-radius: 10px;
}

</style>
<div id="myDiv">
<input type="text" class="my_input" id="text-input">
</div>