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

Bloque sin redondeado
Bloque con 7px de redondeado
Bloque con 20px de redondeado

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:

20px 0 0 0
0 20px 0 0
0 0 20px 0
0 0 0 20px

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

20%
50%

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!

Publicado el Blog | Etiquetado

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar estas etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>