Crear esquinas redondeadas con CSS Border-Radius

Introducción

En este laboratorio, los participantes explorarán la poderosa propiedad CSS border-radius para crear esquinas redondeadas visualmente atractivas en los elementos web. A través de un enfoque paso a paso, los aprendices comenzarán configurando un documento HTML básico y aplicarán progresivamente diversas técnicas de border-radius para entender cómo manipular dinámicamente las esquinas de los elementos.

El laboratorio cubre habilidades fundamentales como crear esquinas redondeadas uniformes, aplicar diferentes radios a las esquinas individuales y experimentar con variaciones de border-radius. Al trabajar a través de ejemplos prácticos, los estudiantes adquirirán experiencia práctica en el uso de CSS para transformar elementos div con bordes afilados en componentes de diseño suaves y redondeados, mejorando el atractivo estético de las interfaces web.

Configurar el documento HTML

En este paso, configurarás el documento HTML básico para explorar las propiedades CSS border-radius. Crearemos un archivo HTML simple que servirá como base para nuestras experimentaciones de estilo CSS.

Abre el WebIDE y navega hasta el directorio ~/project. Crea un nuevo archivo llamado index.html haciendo clic derecho en el explorador de archivos y seleccionando "Nuevo archivo".

Copia y pega la siguiente estructura HTML en el archivo index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Border-Radius Exploration</title>
    <style>
      /* Agregaremos nuestros estilos CSS aquí en los siguientes pasos */
    </style>
  </head>
  <body>
    <div class="container">
      <h1>CSS Border-Radius Examples</h1>
      <!-- Agregaremos nuestros elementos div aquí en los siguientes pasos -->
    </div>
  </body>
</html>

Este documento HTML básico proporciona una estructura simple para nuestra exploración de border-radius CSS. Analicemos los componentes principales:

La declaración <!DOCTYPE html> garantiza que el navegador utilice la última norma HTML
Las etiquetas <meta> ayudan con la codificación de caracteres y el diseño responsivo
Hemos incluido una etiqueta <style> interna donde agregaremos nuestro CSS en pasos subsiguientes
El <body> contiene un div contenedor que usaremos para nuestros ejemplos

Salida de ejemplo cuando abres este archivo en un navegador:

CSS Border-Radius Examples

Guarda el archivo y asegúrate de que se encuentre en ~/project/index.html.

Aplicar un border - radius básico al elemento div

En este paso, aprenderás cómo aplicar la propiedad básica de borde redondeado para crear esquinas redondeadas en un elemento div. La propiedad border-radius te permite crear esquinas redondeadas y suaves en los elementos HTML con facilidad.

Abre el archivo index.html en el WebIDE. Dentro de la etiqueta <style>, agrega el siguiente CSS para crear un div básico con esquinas redondeadas:

<style>
  .rounded-box {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    border-radius: 20px;
    margin: 20px;
  }
</style>

Ahora, agrega un div con la clase rounded-box dentro de la sección <body> de tu HTML:

<body>
  <div class="container">
    <h1>CSS Border-Radius Examples</h1>
    <div class="rounded-box"></div>
  </div>
</body>

Analicemos las propiedades CSS:

width y height establecen el tamaño del div
background-color le da un color sólido al div
border-radius: 20px crea esquinas redondeadas con un radio de 20 píxeles
margin agrega un poco de espacio alrededor del div

Cuando abres este archivo HTML en un navegador, verás un cuadrado azul con esquinas redondeadas. La propiedad border-radius aplica una curva igual a las cuatro esquinas del div.

Salida visual de ejemplo:

+--------------------+
|                    |
|   Blue box with    |
|   rounded corners  |
|                    |
+--------------------+

Experimenta cambiando el valor de border-radius para ver cómo afecta la curvatura de las esquinas. Prueba valores como 10px, 50px o incluso 100px para ver diferentes efectos de redondeado.

Crear div con diferentes radios de esquina

En este paso, aprenderás a crear divs con diferentes radios de esquina, lo que te dará más control sobre el redondeado de las esquinas individuales. La propiedad border-radius se puede utilizar para crear formas únicas e interesantes.

Actualiza la sección <style> en tu archivo index.html con el siguiente CSS:

<style>
  .different-corners {
    width: 250px;
    height: 200px;
    background-color: #2ecc71;
    margin: 20px;
  }

  .top-left-corner {
    border-top-left-radius: 50px;
  }

  .bottom-right-corner {
    border-bottom-right-radius: 30px;
  }

  .mixed-corners {
    border-top-left-radius: 40px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 60px;
  }
</style>

Ahora, agrega los divs correspondientes al cuerpo de tu HTML:

<body>
  <div class="container">
    <h1>CSS Border-Radius Examples</h1>
    <div class="rounded-box"></div>

    <div class="different-corners top-left-corner"></div>
    <div class="different-corners bottom-right-corner"></div>
    <div class="different-corners mixed-corners"></div>
  </div>
</body>

Analicemos las diferentes aplicaciones de border-radius:

border-top-left-radius: 50px redondea solo la esquina superior izquierda
border-bottom-right-radius: 30px redondea solo la esquina inferior derecha
El div mixed-corners demuestra cómo se pueden establecer diferentes radios para cada esquina independientemente

Salida visual de ejemplo:

+--------------------+
|  Green box with   |
|  varied corner    |
|  roundings        |
+--------------------+

Experimenta cambiando los valores en píxeles para ver cómo diferentes radios de esquina crean formas únicas. Puedes utilizar diferentes unidades como píxeles (px), porcentajes (%) o incluso utilizar diferentes valores para los radios horizontales y verticales.

Explorar las propiedades individuales de radio de esquina

En este paso, profundizarás en las propiedades individuales de radio de esquina y aprenderás a crear esquinas redondeadas más complejas y precisas utilizando diferentes unidades y técnicas.

Actualiza la sección <style> en tu archivo index.html con el siguiente CSS:

<style>
  .individual-radius {
    width: 300px;
    height: 200px;
    background-color: #e74c3c;
    margin: 20px;
  }

  .elliptical-corners {
    border-top-left-radius: 50px 25px;
    border-top-right-radius: 25px 50px;
    border-bottom-right-radius: 40px 20px;
    border-bottom-left-radius: 20px 40px;
  }

  .percentage-corners {
    border-top-left-radius: 30%;
    border-bottom-right-radius: 30%;
  }
</style>

Agrega los divs correspondientes al cuerpo de tu HTML:

<body>
  <div class="container">
    <h1>CSS Border-Radius Examples</h1>
    <div class="individual-radius elliptical-corners"></div>
    <div class="individual-radius percentage-corners"></div>
  </div>
</body>

Exploremos las nuevas técnicas de border-radius:

Esquinas elípticas:
- Utiliza dos valores para cada esquina: border-radius: radio-horizontal radio-vertical
- Crea una curva similar a una elipse en lugar de un círculo perfecto
- Ejemplo: border-top-left-radius: 50px 25px crea una curva asimétrica
Esquinas basadas en porcentajes:
- Utiliza porcentajes para crear radios de esquina responsivos y proporcionales
- border-top-left-radius: 30% redondea la esquina según el tamaño del elemento
- Ideal para crear diseños adaptativos

Salida visual de ejemplo:

+--------------------+
|  Red boxes with   |
|  unique corner    |
|  roundings        |
+--------------------+

Experimenta cambiando los valores y unidades de radio para ver cómo afectan la apariencia del elemento.

Experimentar con variaciones de border - radius

En este último paso, explorarás técnicas avanzadas de border-radius que pueden crear formas únicas y creativas utilizando CSS. Demonstraremos cómo border-radius se puede utilizar para crear diseños geométricos complejos.

Actualiza la sección <style> en tu archivo index.html con el siguiente CSS:

<style>
  .creative-shapes {
    width: 250px;
    height: 250px;
    margin: 20px;
    background-color: #9b59b6;
  }

  .circle {
    border-radius: 50%;
  }

  .leaf-shape {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
  }

  .complex-shape {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
</style>

Agrega los divs correspondientes al cuerpo de tu HTML:

<body>
  <div class="container">
    <h1>CSS Border-Radius Creative Shapes</h1>
    <div class="creative-shapes circle"></div>
    <div class="creative-shapes leaf-shape"></div>
    <div class="creative-shapes complex-shape"></div>
  </div>
</body>

Exploremos estas variaciones creativas de border-radius:

Círculo perfecto:
- Utiliza border-radius: 50% para crear un círculo perfecto
- Funciona haciendo que el radio sea igual a la mitad del ancho/alto del elemento
Forma parecida a una hoja:
- Redondea selectivamente ciertas esquinas para crear formas orgánicas
- border-top-left-radius: 50% crea una esquina curva
Forma asimétrica compleja:
- Utiliza la sintaxis avanzada border-radius: horizontal / vertical
- border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% crea una forma única y asimétrica

Salida visual de ejemplo:

+--------------------+
|  Purple shapes    |
|  with creative    |
|  border-radius    |
+--------------------+

Experimenta cambiando los valores en porcentaje y observando cómo transforman la forma del elemento.

Resumen

En este laboratorio, los participantes aprenden a crear esquinas redondeadas utilizando las propiedades de border-radius de CSS a través de una exploración paso a paso. El laboratorio comienza configurando un documento HTML básico con una etiqueta de estilo interna, proporcionando una base para las experimentaciones de estilo CSS. Los participantes empiezan creando una estructura HTML simple y luego van aplicando progresivamente técnicas de border-radius a los elementos div.

El viaje de aprendizaje incluye aplicar un border-radius básico para crear esquinas suaves, experimentar con diferentes radios de esquina y explorar las propiedades individuales de radio de esquina. Al trabajar a través de ejemplos prácticos, los participantes adquieren experiencia práctica en la manipulación de las formas de los elementos utilizando CSS, comprendiendo cómo border-radius puede transformar la apariencia visual de los elementos de una página web con técnicas de estilo simples e intuitivas.