Con la propiedad CSS border-radius, puedes dar a cualquier elemento "esquinas redondeadas". La propiedad CSS border-radius define el radio de las esquinas de un elemento.

Sugerencia: La propiedad border-radius es en realidad una propiedad abreviada para las propiedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border-bottom-left-radius.

CSS border-radius - Especificar cada esquina

La propiedad border-radius puede tener de uno a cuatro valores. Estas son las reglas:

  • Cuatro valores: border-radius: 15px 50px 30px 5px; (el primer valor se aplica a la esquina superior izquierda, el segundo valor se aplica a la esquina superior derecha, el tercer valor se aplica a la esquina inferior derecha y el cuarto valor se aplica a la esquina inferior izquierda).

Ejm

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

También puedes crear esquinas elípticas:

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Resumen

Propiedad Descripción
border-radius Una propiedad abreviada para configurar las cuatro propiedades border-*-*-radius
border-top-left-radius Define la forma del borde de la esquina superior izquierda
border-top-right-radius Define la forma del borde de la esquina superior derecha
border-bottom-right-radius Define la forma del borde de la esquina inferior derecha
border-bottom-left-radius Define la forma del borde de la esquina inferior izquierda