Borde redondeado con CSS3 , CSS

CSS ha alcanzado la versión 3, llamada Css3. Implementa muchas nuevas funciones, como por ejemplo en este caso podemos hacer div con borde redondeado a nuestro estilo con unas simples líneas de código.

 

Para hacer los bordes redondeados hay dos tipos diferentes, para los navegadores basados en tecnología Mozilla y para navegadores Webkit. Explicaremos los dos tipos. Lo recomendado es añadir los dos tipos de código diferente y así adaptar nuestra web a la mayoría de navegadores.

 

Crear un Div con borde simple redondeado 

DIV {
border: 1px solid #000000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
padding: 10px;
}
 

 

La parte -moz- ó -webkit- es la parte que varía según será navegador Mozilla o Webkit. En este codigo que hemos visto simplemente se puede personalizar en la parte donde pone los pixeles ‘px’ contra más pixeles de radio más grande será el semicírculo de las esquinas del borde. Ejemplo Visual:

 

 

También podemos poner un radio diferente a cada esquina del Div. Aunque éste código solo funciona en navegador Mozilla: 

-moz-border-radius: 7px 0 44px 83px; 

Ejemplo Visual:

 

 

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.