lunes, 15 de noviembre de 2010

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:
No olvide de escribir su comentario!

6 comentarios:

  1. Buenisimo me sirvio bastante aunque estoy viendo como solo dejar el redondeado sin el borde negro :S

    ResponderEliminar
    Respuestas
    1. Abajo coloca

      border-color: transparent;

      siem pre en css ;)

      Eliminar
  2. Interesante, gracias por compartir....

    ResponderEliminar
  3. es muy interesante, si le quieres pones otro color solo tienes que aplicar
    border:2px solid #F781BE;
    border-radius:40px 0 44px 83px;
    -moz-border-radius:40px;

    ResponderEliminar