Como creo bordes redondeados con CSS3?

Transparencia en CSS3

La problemática de simular bordes redondeados con recorte de imágenes y javascript se soluciona con la llegada de CSS3. La propiedad “Border-radius” permite redondear cajas con solo especificar un par de valores.


Esta propiedad no esta estandarizada y para su óptimo funcionamiento necesita de propiedades soporte para los motores Webkit y Mozilla.


En cada propiedad “Border-radius” se debe especificar un valor idéntico, como en el siguiente ejemplo donde las 4 esquinas generan su propia curva de 10 pixeles.


Código CSS:

.caja{
-moz-border-radius: 10px; /*Propiedad de soporte*/
-webkit-border-radius: 10px; /*Propiedad de soporte*/
border-radius: 10px; /*Propiedad válida*/
width:300px;
padding:20px;
border:1px solid #CCCCCC;
background-color:#990000;
color:#FFFFFF;
font-size:1.2em;
font-family:Arial, Helvetica, sans-serif;
} 

Código XTML:

Curabitur mollis nunc a massa tincidunt tempus. Morbi vitae facilisis justo. Vivamus eget facilisis leo.

Resultado:

Bordes Redondeados

Deja un comentario