Bordes redondeados con CSS3

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:

 

 

 

1 comentario
  • Christian Publicado el 29/12/2014 a las 17:28 Responder

    En IE 7 no funciona 🙁

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *