Bordes redondeados con CSS3

Antes con CSS2 si queríamos crear un recuadro con los bordes redondeados, primero teníamos que hacer las cuatro imágenes de las esquinas redondeadas y poner cada imagen en una esquina y bla, bla, bla….

Ahora con CSS3, y la propiedad border-radius lo podemos hacer de manera muy fácil. Fijaos en el siguiente ejemplo:

Bordes redondeados con CSS3

Así de fácil y rápido se hace un caja con los bordes redondeados en CSS3.

Para conseguir este efecto he usado el código XHTML y CSS que os muestro a continuación.

Código XHTML

<div class="bordes-redondeados">
        
    <h2>Bordes redondeados con CSS3</h2>
            
    <p>Así de fácil y rápido se hace un caja con los bordes redondeados en CSS3.</p>
        
</div> 

Código CSS

 .bordes-redondeados {
    width: 400px;    
    margin: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #069;
}

.bordes-redondeados h2 {
    padding: 10px 15px 5px 15px;   
    text-align: center
    color: #fff;
}

.bordes-redondeados p {
    margin: 0;
    padding: 5px 15px 10px 15px;    
} 

Sigue leyendo

33 herramientas para generar estilos CSS

Pablo se ha currado una magnífica recopilación de los 33 sitios en los que podrás generar estilos CSS para tus diseños.

herramientas para generar estilos CSS

Claro esta que si controlas de CSS esto te sobra, pero para los que no saben mucho o estan empezando les puede ir muy bien para fijarse en el código CSS que le devuelve el generador de código CSS para cada situación.

Yo aparte de estos añadiría el generador de fondos que ya comente en su día.