Cómo crear un contenedor div con esquinas redondeadas

Los diseñadores Web pueden crear redondeadas esquinas utilizando HTML y CSS. 

CREATE WRAPPER

En lugar de utilizar imágenes para crear el efecto de redondeadas esquinas de una página Web, muchos codificadores HTML utilizan una técnica pura CSS para crear div envolturas ofrecen redondeadas sin esquinas 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 y, además, escalas de la CSS con más facilidad que las imágenes, lo que significa que usted 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 uncontenedor con redondeadas esquinas requiere sólo unas pocas líneas de código CSS.

Instrucciones

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

Tipo "div id =" contenedor "/ div" donde desea que el elemento con las esquinas redondeadas para que aparezca en el documento HTML. Va a poner el contenido de este elemento entre la apertura y cierre de las etiquetas div.

Escriba "# wrapper {border-radius: Xpx;}" en la hoja de estilos CSS, y sustituir la "X" con un número que representa la forma redonda desea que las esquinas sean, mayor es el número de píxeles, más redondeada del elemento hará ser. Usted también tendrá que especificar otros elementos, como el ancho de la envoltura y el color de fondo. Cuando haya terminado, el código debe ser similar al siguiente:

# Wrapper {width: 100px; background-color: # ccc; border-radius: 40px;}

Hacer compatible entre navegadores el código por lo que se muestra como va en todos los principales navegadores. Firefox de Mozilla no soporta el comando "border-radius", por lo que tendrá que agregar el código siguiente al 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:

# Wrapper {width: 100px; background-color: # ccc; border-radius: 40px;-moz-border-radius: 40px;}

Ajuste su envoltura de modo que la curva en cada esquina tiene un radio diferente mediante la edición del código CSS y la adición de etiquetas específicas para crear cada esquina. Por ejemplo, a la vuelta de la esquina superior izquierda, y también poner en práctica el código que hará que su envoltorio compatible con Firefox, el código de uso, tales como los siguientes:

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

A la vuelta de la esquina superior derecha, utilice código similar al siguiente:

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

A la vuelta de la esquina inferior izquierda, use:

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

A la vuelta de la esquina inferior derecha, utilice:

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

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