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;
} 