Bordes redondeados con CSS3

25 Ene Bordes redondeados con CSS3

Hace algún tiempo, para crear un cuadrado (o rectángulo) con bordes redondeados, debíamos crear una imagen y ponerla de fondo, y si este cuadrado tenía un tamaño variable, había que apañárselas para repetir el background. Con CSS3, todo se facilita, crear un cuadrado con bordes redondeados se limita a lo siguiente:

[html title=»HTML para crear el cuadrado»]
<div class="Cuadrado">

</div>
[/html]
[css title=»CSS para bordes redondeados, sombra…»]
.Cuadrado {
border-radius: 25px; // nivel de redondeo (puedes poner cuatro valores, uno para cada esquina)
box-shadow: 5px 5px 5px #000; // tamaño y color de la sombra
width: 200px;
height: 200px;
background: #5e8b00;
color: #FFF;
}
[/css]

A continuación podéis ver cómo quedaría nuestro cuadrado: