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:

 

 

 

Entradas relacionadas
Cómo añadir CSS en nuestra web

En nuestro artículo anterior hicimos referencia a qué son y para qué sirven los estilos CSS. Para poder hacer uso de ellos debemos empezar por incluirlos en nuestros […]

Leer más
Estilos CSS, ¿qué son y para qué sirven?

Cuando se habla de apariencia estética o cambios visuales de una web siempre se mencionan los estilos CSS. Vamos a explicar un poco qué son […]

Leer más
10 trucos que deberías saber de Coda 2

10 tips que te ayudarán a usar Coda 2 de una manera más eficiente.

Leer más
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 *