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:

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 →