Cómo hacer un cuadro de texto oval en CSS

Como regla general, cuadros de texto en las páginas Web son de forma rectangular, con mayor frecuencia más ancha que alta. Esta forma tiene sentido porque cuando se escribe un párrafo de texto, se lee mejor dentro de un rectángulo. La aplicación de un radio de frontera de 50 por ciento a un cuadro de texto va a cambiar su forma de un óvalo, si desea salir de la caja. El texto aparece como normal, pero la forma que lo rodea se convertirá oval o, si se establece la anchura y la altura iguales entre sí, circular.

Instrucciones

1 Abrir el código fuente de la página Web mediante la carga de su archivo HTML en el Bloc de notas o un editor de código. Encuentra el código del cuadro de texto:

<Textarea id = "myoval"> </ textarea>

Añadir un nombre de nombre de ID, como se muestra, si todavía no existe un ID para este cuadro de texto. Lo necesitará para escribir el código CSS.

2 Abra el archivo de hoja de estilo CSS para su sitio web, y vaya a la parte inferior. Añadir una regla de estilo que se dirige a la caja de texto por su nombre ID:

myoval {

}

3 Establecer la anchura y la altura de la caja de texto dentro de la regla de estilo:

myoval {

Anchura: 400px;
altura: 200px;
}

Al crear un óvalo de la caja de texto, la anchura y la altura lo suficientemente diferente por lo que es visiblemente más largo que ancho o más ancho que largo.

4 A su vez de borde predeterminado del cuadro de texto:

myoval {

border: 0;
}

También puede especificar una nueva frontera:

frontera: 3px sólido negro;

5 Aplicar un radio de borde de 50 por ciento a la caja de texto:

myoval {

border: 0;
la frontera de radio: 50%;
}

Los elementos con igual anchura y la altura se convertirán en círculos. Un cuadro de texto con una forma rectangular se convertirá en un óvalo.

Consejos y advertencias

• Añadir un montón de relleno de usar "padding: XXpx", donde "XX" es el número de píxeles que desee agregar alrededor del texto.