CSS

Cómo crear Bordes Redondeados con CSS

CSS

Anteriormente realizar bordes redondeados en una página web era un auténtico engorro, teníamos que utilizar una imagen con el borde redondeado e intentar encajarla en la caja o “div” que quisiéramos.

Ahora, gracias a CSS3, tenemos una propiedad dedicada a ello, border-radius.

Cómo utilizar la propiedad border-radius

Con la propiedad CSS border-radius podemos crear bordes redondeados en cualquier elemento de la página sin muchos problemas.

La propiedad tiene esta forma:

#capa { 
    border-radius: 7px; 
} 

Simplemente tenemos que añadir la cantidad de pixeles que queremos para realizar el borde en la capa seleccionada, a más pixeles más pronunciado será el redondeado.

He puesto como valor 7px ya que es un valor bastante adecuado y que yo suelo utilizar mucho al realizar bordes redondeados.

Ejemplo

Veamos un ejemplo. Son tres bloques: Uno sin utilizar border-radius, uno con un redondeado poco pronunciado (7px) y otro con un redondeado más marcado (20px).

[one_third]Bloque sin redondeado[/one_third][one_third]Bloque con 7px de redondeado[/one_third][one_third_last]Bloque con 20px de redondeado[/one_third_last]

Código del ejemplo

Este es el código que he utilizado en el ejemplo.

/* Caja Turquesa */

#ejemplo-br .one_third {
    background-color: #00a888; padding: 40px 0; text-align: center; color: white;
}

/* Caja Verde */

#ejemplo-br .one_third:nth-child(2) { 
    background-color: #00b961; border-radius: 7px;
}

/* Caja Azul */

#ejemplo-br .one_third:nth-child(3) { 
    background-color: #057fbc; border-radius: 20px; 
}

Tener en cuenta que #ejemplo-br es la capa que engloba a todos los bloques en el ejemplo y .one_third es la clase que identifica a cada bloque. He utilizado :nth-child para poder seleccionar la primera, segunda y tercera caja del ejemplo, ya que todas tienen la misma clase “.one_third”.

Si quieres aprender más sobre los IDs y Clases de HTML haz click en el enlace de este párrafo.

Cómo definir que Bordes queremos Redondear

Una caja tiene 4 esquinas, podemos elegir que esquinas redondearemos.

Se hace así:

#capa {
    border-radius: 7px 20px 7px 20px;
}

Como ves, podemos añadir estos 4 valores, cada uno corresponde a una de las 4 esquinas de la caja.

Ejemplo

Voy a poner un ejemplo con 4 cajas, en cada una solo redondearemos una de las esquinas, así verás a que esquina corresponde cada valor:

[one_fourth]20px 0 0 0[/one_fourth][one_fourth]0 20px 0 0[/one_fourth][one_fourth]0 0 20px 0[/one_fourth][one_fourth_last]0 0 0 20px[/one_fourth_last]

Aquí ya ves a que esquina corresponde cada valor:

  • Primer valor: Esquina superior izquierda
  • Segundo valor: Esquina superior derecha
  • Tercer valor: Esquina inferior derecha
  • Cuarto valor: Esquina inferior izquierda

Si te fijas empieza en la esquina superior izquierda y desde aquí va en el sentido de las agujas del reloj.

Código del ejemplo

Este es el código que he utilizado en el ejemplo:

/* Todas las Cajas */
#ejemplo-br-esquinas .one_fourth {
    padding: 40px 0; text-align: center; color: white;
}

/* Caja Turquesa */

#ejemplo-br-esquinas .one_fourth:nth-child(1) {
    background-color: #00a888; border-radius: 20px 0 0 0; 
}

/* Caja Verde */

#ejemplo-br-esquinas .one_fourth:nth-child(2) {
    background-color: #00b961; border-radius: 0 20px 0 0; 
}

/* Caja Azul */

#ejemplo-br-esquinas .one_fourth:nth-child(3) {
    background-color: #057fbc; border-radius: 0 0 20px 0; 
}

/* Caja Lila */

#ejemplo-br-esquinas .one_fourth:nth-child(4) {
    background-color: #9c1aae; border-radius: 0 0 0 20px; 
}

#ejemplo-br-esquinas es la capa que engloba a todas las cajas y .one_fourth es la clase que define a cada caja individualmente.

De nuevo he utilizado :nth-child para elegir cada caja por separado.

Cómo crear Cajas Redondas

Incluso tenemos un “truquito” para crear cajas totalmente redondas.

La clave para conseguirlo es añadir un % en lugar de valores con pixeles, al hacer esto la caja se irá redondeando. A mayor porcentaje más redonda será la caja.

Ejemplo

Voy a crear dos capas, una con 20% de redondeado y otra con un 50%:

[one_half]20%[/one_half][one_half_last]50%[/one_half_last]

Código del ejemplo

/* Todas las cajas */

#ejemplo-br-redonda .one_half {
    padding: 40px 0; text-align: center; color: white;
}

/* Caja Turquesa */

#ejemplo-br-redonda .one_half:nth-child(1) {
    background-color: #00a888; border-radius: 20%; 
}

/* Caja Verde */

#ejemplo-br-redonda .one_half:nth-child(2) {
    background-color: #00b961; border-radius: 50%; 
}

#ejemplo-br-redonda es la capa que engloba a todas las cajas y .one_half la clase que define a cada caja individualmente.

Como ves, a más % más redonda será la caja. Cuando llegamos a cierto % la caja se vuelve totalmente redondeada.

Cómo pasa con los valores en pixeles, también podemos definir cada esquina con % para crear cajas muy extrañas.

¡Y eso es todo por hoy!

Espero que con esto puedas crear todos los tipos de bordes y cajas redondeados que necesites en tu página web. La verdad es que la inclusión de la propiedad border-radius le ha aportado mucho más juego a CSS, ¡Espero que sigan añadiendo más propiedades así!

¡Hasta la próxima entrada!

Give a Comment