Cómo crear un contenedor DIV con esquinas redondeadas

En lugar de utilizar imágenes para crear el efecto de esquinas redondeadas en una página Web, muchos codificadores HTML utilizan una técnica de CSS puro para crear contenedores div que ofrecen las esquinas redondeadas sin gráficos. El término "contenedor" se refiere a un elemento de una página Web o en el área general del contenido de la página. Los diseñadores utilizan CSS porque las imágenes pueden ralentizar el tiempo de carga de la página; Además, CSS escalas más fácilmente que las imágenes, lo que significa que puede hacer que una página se ve igual en una pequeña pantalla de ordenador y una pantalla más grande. Creación de un envoltorio con esquinas redondeadas requiere sólo unas pocas líneas de código CSS.

Instrucciones

Instrucciones

1 Abra la hoja de estilos CSS y el documento HTML de la página Web que se está editando.

2 Tipo "<div id =" contenedor "> </ div>" donde desea que el elemento con las esquinas redondeadas para mostrar en el documento HTML. Que voy a poner el contenido de ese elemento entre las etiquetas de apertura y cierre div.

3 Tipo "#wrapper {border-radius: Xpx;}" en su hoja de estilo CSS, y reemplazar la "X" con un número que representa la forma redonda desea que las esquinas sean; cuanto mayor sea el número de píxeles, más redondeado del elemento será. También tendrá que especificar otros elementos, como el ancho y el color de fondo de la envoltura. Cuando haya terminado, el código debe ser similar al siguiente:

envoltorio {width: 100px; background-color: #ccc; la frontera de radio: 40px;}

4 Compatibilizar su código multi-navegador para que muestre como se piensa en todos los principales navegadores. Mozilla Firefox no es compatible con el comando "frontera de radio", por lo que tendrá que añadir el siguiente código a la CSS de su envoltorio:

-moz-border-radius: Xpx;

Vuelva a colocar la "X" con un valor numérico, indicado en píxeles. El resultado final de su código se verá algo como esto:

envoltorio {width: 100px; background-color: #ccc; la frontera de radio: 40px; -moz-border-radius: 40px;}

5 Ajuste su envoltura de modo que la curva en cada esquina tiene un radio diferente al editar el código CSS y la adición de etiquetas específicas para crear cada esquina. Por ejemplo, para redondear la esquina superior izquierda, y también implementar el código que hará que su envoltura compatible con Firefox, usar un código como el siguiente:

border-top-izquierda-radio: 40px; -moz-border-top-izquierda-radio: 40px;

Para redondear la esquina superior derecha, utilice código similar al siguiente:

border-top-derecha-radio: 40px; -moz-border-top-derecha-radio: 40px;

Para redondear la esquina inferior izquierda, utilice:

border-bottom-left-radius: 40px; -moz-border-bottom-left-radius: 40px;

Para redondear la esquina inferior derecha, utilice:

border-bottom-derecha-radio: 40px; -moz-border-bottom-derecha-radio: 40px;

6 Guarde la hoja de estilos CSS y el documento HTML para que los cambios surtan efecto.