Esquinas Redondeadas CSS

Con CSS es posible redondear las esquinas de cualquier etiqueta.

La propiedad border-radius

La propiedad border-radius se especifica el radio de las esquinas de una etiqueta HTML.

En el siguiente ejemplo, una etiqueta HTML con esquinas redondeadas y con borde:

.redondeadas {
  border-radius: 25px;
  border: thin solid green;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Muestra:

En el siguiente ejemplo, un elemento HTML con esquinas redondeadas y con color de fondo:

.redondeadas {
  border-radius: 25px;
  background-color: green;
  padding: 20px;
  width: 200px;
  height: 150px;
  color: white;
}

Muestra:

En el siguiente ejemplo, una etiqueta HTML con esquinas redondeadas y con una imagen de fondo:

.redondeadas {
  border-radius: 25px;
  background: url(tapiz.png);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Muestra:

Nota: La propiedad border-radius es en realidad una propiedad "taquigráfica" o "escritura corta" para las propiedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border-bottom-left-radius.

Especificando cada esquina

La propiedad border-radius puede tener uno o cuatro valores. Aquí las reglas:

Para cuatro valores: La declaración border-radius: 15px 50px 30px 5px; especifica que el primer valor aplica para la esquina superior izquierda, el segundo valor aplica para la esquina superior derecha, el tercer valor aplica para la esquina inferior derecha y el cuarto valor aplica para la izquierda inferior izquierda.

Para tres valores: La declaración border-radius: 15px 50px 30px; especifica que el primer valor aplica para la esquina superior izquierda, el segundo valor aplica para las esquinas tanto superior derecha como para la inferior izquierda y el tercer valor aplica para la esquina inferior derecha.

Para dos valores: La declaración border-radius: 15px 50px; especifica que el primer valor aplica para las esquinas superior izquierda como para la inferior derecha y el segundo valor aplica para las esquinas superior derecha como para inferior izquierda.

Para un solo valor: La declaración border-radius: 15px; especifica que el valor aplica para las cuatro esquinas, redondeadas equitativamente.

Propiedades CSS para esquinas redondeadas

Propiedad	Descripción
border-radius	Una propiedad "taquigráfica" o de "escritura abreviada" para especificar el redondeo de las cuatro esquinas de la etiqueta HTML.
border-top-left-radius	Especifica la forma del borde de la esquina superior izquierda.
border-top-right-radius	Especifica la forma del borde de la esquina superior derecha.
border-bottom-right-radius	Especifica la forma del borde de la esquina inferior derecha.
border-bottom-left-radius	Especifica la forma del borde de la esquina inferior izquierda.