input con esquinas redondeadas

sebacomas · #1 (**permalink**) 13/02/2011, 14:31

Tengo el siguiente codigo:

<body>

nombre<input type="text"/>

</body>

Quiero que las esquinas del input sean redondeadas. Si alguien puede ayudarme con esto! Saludos!

#2 (**permalink**) 13/02/2011, 17:26

Prueba con esto:

Código HTML:

<html>
<style type="text/css">
    input {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        border: 1px solid #000000;
        padding: 0 4px 0 4px;
     }
</style>

<body>

    nombre<input type="text"/>

</body>
</html>

sebacomas · #3 (**permalink**) 15/02/2011, 10:28

Gracias, por tu respuesta.
Me sirve para firefox y chrome pero no para IE.
Saludos, espero respuesta!

ArturoGallegos · #4 (**permalink**) 15/02/2011, 11:56

lo ideal es que uses una imagen de fondo con los bordes redondeados
y el css coloques por ejemplo

Código CSS:

Ver originalinput[type="text"]{width:100px;height:28px;line-height:28px;padding:0 8px;border:none;background:url(imgborderedondo.jpg) no-repeat;}

o tienes la opción que ya te dio el compañero añadiéndole un archivo border-radius.htc para que funcione en IE6 - IE8 (el IE9 no lo he probado)

de aquí puedes bajar ese archivo y te explican como usarlo.