Border-radius: Esquinas redondeadas con CSS3

Ahora aprenderemos a poner esquinas redondeadas de manera fácil y rápida con CSS3, es posible aplicar a diversos elementos HTML, entre los interesantes podemos destacar imágenes, elementos div, contenedores, en general cualquier elemento HTML. Al finalizar serás capaz de aplicar esquinas redondeadas, establecer el tamaño de dicho radio o si gustas, elegir que esquinas tendrán dicho efecto o puedes personalizar cada radio en cada esquina.

Cómo poner esquinas redondeadas con CSS

Poner esquinas redondeadas a cualquier elemento con CSS es muy simple, solo debemos establecer la propiedad correspondiente con los valores que queremos, veamos.

Propiedad border-radius

La propiedad border-radius nos permite establecer un radio para redondear las esquinas de un elemento; el valor que toma es un valor numérico con unidades que pueden ser: px, em, pt, %, etc.

La sintaxis quedaría de la siguiente manera: border-radius: 10px;

Esquinas redondeadas uniformes

Para establecer esquinas redondeadas uniformes en todas las cuatro esquinas de un elemento, simplemente establecemos un único valor con su respectiva unidad para la propiedad border-radius, esta se aplicará a las cuatro esquinas simultáneamente; veamos un ejemplo:

Ejemplo de border-radius CSS

<div id="redondeado"></div>
<style>
  #redondeado {
    width: 250px;
    height: 200px;
    background: blue;
    border-radius: 20px;
    }

Crear un círculo con CSS

Crear un círculo usando la propiedad border-radius es muy fácil, solo debemos asegurar que el elemento que queremos convertir en círculo tenga las dimensiones de sus lados iguales, es decir debe tener la forma de un cuadrado, de tal manera que si establecemos esquinas redondeadas a la mitad de la dimensión de dicho lado, el cuadrado quedará en forma de círculo perfecto. Veamos un ejemplo.

Ejemplo de círculo con border-radius en CSS

<div id="circulo"></div>
<style>
  #circulo {
    width: 200px;
    height: 200px;
    background: red;
    border-radius: 100px;
    }

Observa el ejemplo, podemos notar que el radio de esquina establecido está determinada en 100px, y es la mitad del ancho del cuadrado que son 200px;

Border-radius con dos valores

También es posible utilizar dos valores numéricos para la propiedad border-radius, con su respectiva unidad de medida para establecer esquinas redondeadas, dichos valores simplemente se separan por un espacio y se cierra naturalmente con un punto y coma (;).

Por ejemplo: border-radius: 10px 30px;

En este caso, el primer valor afecta las esquinas superior izquierdo e inferior derecho, mientras que el segundo valor se aplica a las esquinas superior derecho e inferior izquierdo. Veamos un ejemplo para ver cómo.

Ejemplo de border-radius con dos valores

<div id="circulo"></div>
<style>
  #circulo {
    width: 300px;
    height: 200px;
    background: red;
    border-radius: 20px 70px;
    }

Para que entiendas, el resultado será un rectángulo con esquinas redondeadas, donde las esquinas superior izquierda e inferior derecha tendrán un radio de 20px y las esquinas superior derecha e inferior izquierda tendrán un radio de 70px.

Border-radius con  tres valores

La propiedad border-radius también admite tres valores separados por espacios; en ese caso, el primer valor se aplica para la esquina superior izquierda, el segundo valor se aplica a las esquinas superior derecha e inferior izquierda, el tercer valor se aplica para la esquina inferior derecha.

Ejemplo de border-radius con tres valores

<div id="circulo"></div>
<style>
  #circulo {
    width: 300px;
    height: 200px;
    background: red;
    border-radius: 20px 70px 40px;
    }

Esquinas redondeadas personalizadas

También es posible personalizar el radio de redondez en cada esquina independientemente de las otras esquinas, de tal manera que cada esquina puede tener su propia forma. Para conseguir este efecto simplemente establecemos un valor de radio para cada esquina.

Para personalizar cada esquina utilizaremos 4 valores en la propiedad border-radius, dichos valores se aplicarán en el siguiente orden: superior izquierdo, superior derecho, inferior derecho, inferior izquierdo. De esta manera podemos controlar cada una de las esquinas; veamos un ejemplo.

Ejemplo de esquinas redondeadas diferentes CSS3

<div id="circulo"></div>
<style>
  #circulo {
    width: 300px;
    height: 200px;
    background: red;
    border-radius: 20px 40px 60px 80px;
    }

Otra forma de especificar el border-radius

También podemos establecer el valor del radio solo para la esquina deseada mediante las siguientes propiedades específicas, veamos algunos ejemplos de sintaxis:

• superior izquierda: border-top-left-radius: 10px;
• Superior derecha: border-top-right-radius: 10px;
• inferior derecha: border-bottom-right-radius: 10px;
• inferior izquierda: border-bottom-left-radius: 10px;

Ejemplo de código para border-radius

<div id="circulo"></div>
<style>
  #circulo {
    width: 300px;
    height: 200px;
    background: red;
   border-top-left-radius: 10px;
   border-top-right-radius: 30px;
   border-bottom-right-radius: 50px;
   border-bottom-left-radius: 100px;
    }
</style>

Más formas de border-radius

Los siguientes códigos producen los mismos resultados

<div id="ejemplo"></div>
<style>
#ejemplo {
  width: 300px;
  height: 200px;
  background: red;
  border-radius: 15px / 45px;
}
</style>

<div id="ejemplo"></div>
<style>
#ejemplo {
width: 300px;
height: 200px;
background: red;
border-top-left-radius: 15px 45px;
border-top-right-radius: 15px 45px;
border-bottom-right-radius: 15px 45px;
border-bottom-left-radius: 15px 45px;
}
 </style>

Las siguientes formas también producen resultados similares

<div id="ejemplo"></div>
<style>
#ejemplo {
  width: 300px;
  height: 200px;
  background: red;
  border-radius: 160px 20px 40px / 25px 30px;
}
</style>

<div id="ejemplo"></div>
<style>
  #ejemplo {
width: 300px;
height: 200px;
background: red;
border-top-left-radius: 160px 25px;
border-top-right-radius: 20px 30px;
border-bottom-right-radius: 40px 25px;
border-bottom-left-radius: 20px 30px;
  }
</style>

[popup_anything id=»5821″]