Bordes redondeados (border-radius)

La propiedad border-radius permite crear esquinas redondeadas. Especificamos en píxeles u otra medida el radio de redondeo de la o las esquinas.

Podemos indicar un único valor que se asignará a los cuatro vértices:

#recuadro1{
  border-radius: 20px;  
  background-color:#ddd;
  width:200px;
  padding:10px;
}
border-radius

También podemos indicar el redondeo de cada vértice en forma independiente (el orden de los valores son la esquina superior izquierda, la esquina superior derecha, la esquina inferior derecha y por último la esquina inferior izquierda):

#recuadro2{
  border-radius: 20px 40px 60px 80px;  
  background-color:#aa0;
  width:200px;
  padding:10px;
  margin-top:10px;
}
border-radius

Retornar