Como creo bordes redondeados con CSS3?

Css | Escrito por Ezequiel M. | Enero - 11 - 2010

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

Articulos relacionados:

    • Como evito el desborde de texto con CSS3? Word-wrap es una propiedad creada por Microsoft para la nueva versión de CSS. Esta propiedad soluciona el “problema de cadena de texto” cortándolo en partes para que las palabras largas no desborden de su caja o contenedor. La propiedad con el valor a utilizar en la hoja de estilos seria word-wrap: break-word, y para este caso
    • Interruptor para cambiar el tamaño de fuente con jQuery En este tutorial usaremos jQuery para crear un pequeño script que cambie el tamaño de la fuente al presionar un botón. Vamos a crear una sencilla interfaz con 3 botones, un texto y un poco de jQuery, uno de los frameworks javascript mas fáciles de usar. La estructura xHtml y CSS Antes que nada, debes establecer
    • Como mover un elemento con CSS sin que deje de ocupar su lugar En el ejemplo tenemos un pequeño menú con 6 opciones, vamos a mover la del centro unos pixeles arriba sin que deje de ocupar su espacio en la lista. Con Position:relative se puede mover un elemento sin que este deje vacío su lugar de origen. Los Elementos 1, 3, 4, 5 y 6 se mantienen intactos

Comentarios:

Deja tu opinion