La propiedad border-radius en CSS: Bordes redondeados en imágenes, tablas, botones, inputs y más

Muchas veces, cuando estamos desarrollando una página web, queremos darle un aspecto más moderno y agradable a nuestros contenedores, botones o imágenes usando bordes redondeados. Hoy en día esto se resuelve fácilmente con CSS, pero no siempre fue así.

En mi caso, antes de la llegada de CSS3, crear esquinas redondeadas implicaba usar imágenes recortadas, lo que traía varios problemas: más peso para el sitio, tiempo extra diseñando en editores como GIMP y, peor aún, tener que rehacer todo si cambiaba el tamaño del contenedor. Por suerte, eso quedó atrás gracias a la propiedad border-radius.

En este artículo te explico qué es la propiedad border-radius en CSS, cómo funciona y cómo usarla con ejemplos prácticos, sin necesidad de imágenes.

Antes, usábamos imágenes, lo cual, trae algunos problemas como:

• Algunos kb más para nuestro sitio.
• Una pérdida de tiempo en la creación de la imagen en algún editor de imágenes como GIMP.

Además del hecho de que si deseamos contenedores con distintos tamaños o si incluso cambiamos el tamaño del contenedor, pues debíamos comenzar todo otra vez.

Por qué hoy usamos border-radius y no imágenes

Antes de CSS3, la única forma fiable de simular esquinas redondeadas era usando imágenes como fondo. Esto generaba varios inconvenientes reales:

• El sitio pesaba más (más KB innecesarios).
• Perdíamos tiempo diseñando imágenes solo para bordes.
• Los diseños no eran flexibles ni adaptables.

Cuando empecé a trabajar con CSS moderno, border-radius se convirtió en una de esas propiedades imprescindibles: simple, ligera y totalmente adaptable a cualquier tamaño de contenedor. Hoy es un estándar totalmente soportado por los navegadores modernos.

Qué es la propiedad border-radius en CSS

La propiedad border-radius permite definir el radio de las esquinas de un elemento, es decir, qué tan redondeado será su borde.
Por defecto, su valor es 0, lo que significa esquinas completamente rectas.

Su sintaxis básica es muy sencilla:

border-radius: valor;

El valor puede expresarse en distintas unidades como px, %, em, entre otras, e incluso combinarse según el efecto que queramos lograr.

En este artículo le enseñaremos como crear bordes redondeados con solo CSS, es decir, sin emplear imágenes en el proceso.

La propiedad border-radius para definir bordes con CSS

Para crear bordes redondeados a nuestros contenedores solo debemos aplicar la siguiente propiedad:

border-radius

Una de las grandes ventajas de esta propiedad es su flexibilidad. Dependiendo de cuántos valores indiquemos, el comportamiento cambia.

En donde debemos indicar el o los valores en alguna unidad de medida definidas por CSS; incluso podemos mezclarlas, veamos algunos casos:

Si quisiéramos dar un radio de 5px a nuestro contenedor:

border-radius: 5px;

En este primer caso, cuando solo colocamos un valor, el mismo se aplicará en todas las esquinas; sin embargo podemos declarar un valor para cada esquina:

border-radius: 5px 5px 5px 5px;

• Superior izquierda
• Superior derecha
• Inferior derecha
• Inferior izquierda

En donde cada píxel definido corresponde a alguna de las siguientes esquinas:

border-radius: arriba-izquierda arriba-derecha abajo-derecha abajo-izquierda;

Con dos valores, el primero se aplica a la esquina superior izquierda y la inferior derecha, y el segundo a la esquina superior derecha e inferior izquierda:

border-radius: 10px 20px;

Al usar tres valores, el comportamiento es el siguiente:

border-radius: 10px 20px 5px;

• Primer valor: esquina superior izquierda
• Segundo valor: esquina superior derecha e inferior izquierda
• Tercer valor: esquina inferior derecha

Propiedades individuales de las esquinas

También se encuentra definida una propiedad para cada esquina:

• border-radius-top-left: Esquina superior izquierda.
• border-radius-top-right: Esquina superior derecha.
• border-radius-bottom-left: Esquina inferior izquierda.
• border-radius-bottom-right: Esquina inferior derecha.

Personalmente, uso esta forma cuando necesito modificar una sola esquina sin afectar las demás, por ejemplo en tarjetas o elementos flotantes.

En paralelo a esto, puedes decidir no aplicar redondeado de todas las esquina de un contenedor, si no de una sola esquina o borde empleando por ejemplo el siguiente CSS:

border-radius:5px 0 0 0;

Para sacar el redondeo de la esquina superior izquierda; o lo que sería lo mismo:

border-radius-top-left:5px;

Usar directamente la propiedad que hace alusión a la esquina inferior izquierda; puedes hacer lo mismo con las demás esquinas, es decir; la superior derecha o la inferior izquierda/derecha y colocarle los valores que quieras o emplear una o varias de estas propiedades.

Ejemplos del uso de la propiedad border-radius

Para hacer todas estas pruebas lo primero que vamos a crear es una simple DIV o contenedor rectangular con un tamaño predeterminado y con un color de fondo. El resultado sería una contenedor con las esquinas redondeadas.

Bordes redondeados en contenedores (div)

Para el siguiente contenedor:

<div class="contenedor1">contenedor con borde de 5px</div>

Aplicaremos las siguientes reglas; entre ellas nuestro border-radius:

.contenedor1 {
  background-color: #0BF;
  height: 200px;
  width: 200px;
  border-radius: 5px;
}

Obtenemos como resultado final:

Esquinas combinadas

También podemos definir distintos tamaños para las esquinas:

Aplicaremos las siguientes reglas; entre ellas nuestro border-radius:

.contenedor2 {
  background-color: #0BF;
  height: 200px;
  width: 200px;
  border-radius: 15px 0 15px 0;
}

Obtenemos como resultado final:

Un equivalente del ejemplo anterior

.contenedor2_1 {
  background-color: #0BF;
  height: 200px;
  width: 200px;
  border-top-left-radius:15px;
  border-top-right-radius:0;
  border-bottom-right-radius:15px;
  border-bottom-left-radius:0;
  /*border-radius: : 15px 0 15px 0;*/
}

Obtenemos el mismo contenedor que el ejemplo de arriba:

Esquinas redondeadas en las imágenes

En el caso de que queremos colocar bordes redondeados o redondas en una imagen o varias imágenes podemos aplicar todo lo visto anteriormente, solo que en esta ocasión el CSS iría dirigido a la imagen:

img {
  border-radius: 20px;
}

Esquina de los inputs y botones redondas en las imágenes

Aquí ocurre lo mismo que vimos anteriormente, todo lo que vimos anteriormente nos sirve para crear inputs redondeados:

Campo de texto redondeado a 5px:

Campo de texto redondeado a 10px:

Botón redondeado a 10px:

Los formularios también se benefician mucho de esta propiedad. Inputs y botones con bordes redondeados se sienten más modernos y amigables.

Bordes redondeados de una tabla con CSS

También podemos aplicar el redondea a otros elementos, por ejemplo una tabla HTML básica; este ya viene siendo un ejemplo un poco más completo ya que a diferencia del div, una tabla tiene muchos contenedores, que serían sus TD a los cuales les podemos aplicar el redondeado y tenemos varias opciones potenciando todo esto con los selectores ya conocidos en CSS:

El CSS es sencillo, pero aquí hacemos uso de varios selectores adicionales para darle borde solo a algunas parte de la tabla y no toda la tabla; como podrás ver a continuación el bordeado se realiza es a los TD, no ha la tabla como tal; por lo tanto los TRs que contienen a los TH y TD a los cuales se les aplica el borde, son el primer y último TR, y los TH/TD son el primero y último; una vez aclarado esto, el siguiente CSS será de fácil comprensión:

table { 
    border-collapse: separate; 
}
td, th { 
    border: solid 1px rgba(0, 178, 255, 1); 
}
tr td, th { 
    border-top-right-radius: 0;               
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
}
th:first-child { 
    border-top-left-radius: 10px; 
}
th:last-child {   
    border-top-right-radius: 10px; 
}
tr:last-child td:first-child { 
    border-bottom-left-radius: 10px; 
}
tr:last-child td:last-child { 
    border-bottom-right-radius: 10px; 
}

Compatibilidad y buenas prácticas

La propiedad border-radius tiene excelente soporte en navegadores modernos desde hace años. Algunas recomendaciones finales:

• Usa px para control preciso y % para formas circulares.
• Evita valores exagerados que rompan la estética.
• Combínala con box-shadow para resultados más profesionales.
• No dependas de imágenes para bordes.

Conclusiones

Esta es una propiedad de las más utilizadas al momento de hacer una página web; tiene un buen soporte en la mayoría de los navegadores modernos; por eso es importante conocerla y saber su funcionamiento el cual es muy sencillo y práctico.

La propiedad border-radius en CSS es una de las herramientas más simples y poderosas para mejorar el diseño visual de una web. Desde contenedores y botones hasta imágenes y tablas, su uso es intuitivo, flexible y eficiente.

Habiendo pasado por la época en la que todo esto se hacía con imágenes, puedo decir que dominar border-radius te ahorra tiempo, peso y dolores de cabeza. Con unos pocos valores bien aplicados, puedes transformar por completo la apariencia de tus interfaces.

Si quieres seguir practicando, existen herramientas online como CSS Matic que te permiten experimentar visualmente con diferentes radios.