Bordes redondeados con CSS en imágenes, tablas, botones, inputs y más

• Categorías
• /
• CSS
• /
• Bordes redondeados con CSS en imágenes, tablas, botones, inputs y más

Muchas veces al momento de estar haciendo una página web queremos introducir unos bordes redondeados a algún contenedor de información; antes de CSS3 nos veíamos obligados a utilizar imágenes, trayendo varios problemas o molestias, como por ejemplo:

• 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.

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

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;

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

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

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.

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 ,a 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.

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:

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: Botones

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; 
}

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, si quieres practicar un poco más con las esquinas redondeadas puedes emplear este recurso en línea: CSS matic.