Crear un Borde Redondeado en CSS con la Propiedad border-radius

La propiedad border-radius en CSS permite crear bordes redondeados en los elementos HTML. Para hacer uso de esta herramienta simplemente debes aplicarla a un elemento especificando un valor. Este valor determinará el radio del curvado de las esquinas.

El formato a usar es:

elemento {
  border-radius: valor;
}

Donde elemento es el elemento HTML al que se le quiere redondear las esquinas y valor expresa el radio de las esquinas. Este valor puede ser definido en varias medidas como píxeles (px), porcentajes (%), entre otros. Por ejemplo, si se desea hacer un borde redondeado de 10px a un botón, se escribiría de la siguiente manera:

button {
  border-radius: 10px;
}

Este código daría como resultado un botón con las esquinas redondeadas.

Es importante mencionar que border-radius puede aceptar hasta cuatro valores. Esto proporciona la flexibilidad de redondear cada esquina por separado. Por ejemplo:

elemento {
  border-radius: valor1 valor2 valor3 valor4;
}

Aquí, valor1 redondea la esquina superior izquierda, valor2 la esquina superior derecha, valor3 la esquina inferior derecha, y valor4 la esquina inferior izquierda.

Además, esta propiedad también permite el uso de dos radios (horizontal y vertical) por cada esquina para crear curvas elípticas, lo que permite hacer diseños aún más interesantes.

elemento {
  border-radius: valor1 / valor2;
}

Con un uso apropiado de border-radius, puedes darle un toque estético adicional a tu diseño web. Sin embargo, hay que recordar que menos es más en la mayoría de casos, para no sobrecargar visualmente al usuario. Además, es importante siempre tener en cuenta la compatibilidad con los navegadores al usar propiedades CSS. Afortunadamente, border-radius es soportado por todos los navegadores modernos.