La Propiedad BORDER-RADIUS

La propiedad border-radius en CSS se utiliza para redondear las esquinas de un elemento. Puedes controlar el radio de curvatura de cada esquina individualmente o aplicar el mismo radio a todas las esquinas. Esta propiedad es muy útil para crear elementos visualmente atractivos, como botones redondeados, imágenes con esquinas suaves y contenedores con formas personalizadas.

Sintaxis Básica

La sintaxis básica de la propiedad border-radius es la siguiente:

selector {
  border-radius: <radio>;
}

Donde <radio> puede ser un valor único, dos valores, tres valores o cuatro valores, o incluso una sintaxis más compleja para radios elípticos.

Valores de la Propiedad border-radius

1. Un Valor

Si proporcionas un solo valor, este se aplicará a las cuatro esquinas del elemento.

.redondeado-simple {
  border-radius: 10px; /* Todas las esquinas tendrán un radio de 10 píxeles */
}

.redondeado-em {
  border-radius: 0.5em; /* Todas las esquinas tendrán un radio de 0.5 veces el tamaño de la fuente del elemento */
}

.redondeado-porcentaje {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* Creará un círculo si el elemento es cuadrado */
}

2. Dos Valores

Si proporcionas dos valores, el primero se aplicará a las esquinas superior izquierda e inferior derecha, y el segundo valor se aplicará a las esquinas superior derecha e inferior izquierda.

.redondeado-dos-valores {
  border-radius: 20px 5px; /* Superior izquierda e inferior derecha: 20px; Superior derecha e inferior izquierda: 5px */
}

3. Tres Valores

Si proporcionas tres valores, el primero se aplicará a la esquina superior izquierda, el segundo a las esquinas superior derecha e inferior izquierda, y el tercero a la esquina inferior derecha.¹

.redondeado-tres-valores {
  border-radius: 10px 30px 5px; /* Superior izquierda: 10px; Superior derecha e inferior izquierda: 30px; Inferior derecha: 5px */
}

4. Cuatro Valores

Si proporcionas cuatro valores, estos se aplicarán en el siguiente orden: superior izquierda, superior derecha, inferior derecha e inferior izquierda.

.redondeado-cuatro-valores {
  border-radius: 5px 15px 30px 10px; /* Superior izquierda: 5px; Superior derecha: 15px; Inferior derecha: 30px; Inferior izquierda: 10px */
}

Radios Elípticos

Puedes crear esquinas elípticas utilizando una barra diagonal (/) para separar el radio horizontal del radio vertical. La sintaxis general es:

border-radius: <radio-horizontal> / <radio-vertical>;

Tanto <radio-horizontal> como <radio-vertical> pueden aceptar uno, dos, tres o cuatro valores, siguiendo las mismas reglas que se describieron anteriormente para el border-radius sin la barra.

Ejemplos de radios elípticos:

.elipse-simple {
  border-radius: 50% / 25%; /* Radio horizontal del 50%, radio vertical del 25% */
}

.elipse-dos-valores {
  border-radius: 20px 10px / 5px 30px;
  /* Radio horizontal: Superior izquierda e inferior derecha: 20px; Superior derecha e inferior izquierda: 10px */
  /* Radio vertical: Superior izquierda e inferior derecha: 5px; Superior derecha e inferior izquierda: 30px */
}

.elipse-cuatro-valores {
  border-radius: 5px 15px 30px 10px / 30px 10px 15px 5px;
  /* Radio horizontal: Superior izquierda: 5px; Superior derecha: 15px; Inferior derecha: 30px; Inferior izquierda: 10px */
  /* Radio vertical: Superior izquierda: 30px; Superior derecha: 10px; Inferior derecha: 15px; Inferior izquierda: 5px */
}

Propiedades Individuales para Cada Esquina

Para un control más específico, puedes utilizar las siguientes propiedades individuales:

• border-top-left-radius: Establece el radio de la esquina superior izquierda.
• border-top-right-radius: Establece el radio de la esquina superior derecha.
• border-bottom-right-radius: Establece el radio de la esquina inferior derecha.
• border-bottom-left-radius: Establece el radio de la esquina inferior izquierda.

Cada una de estas propiedades puede aceptar uno o dos valores (para radios elípticos). Si se proporciona un solo valor, se utilizará tanto para el radio horizontal como para el vertical. Si se proporcionan dos valores, el primero será el radio horizontal y el segundo el radio vertical.

.esquina-individual {
  border-top-left-radius: 15px;
  border-bottom-right-radius: 30px;
}

.elipse-individual {
  border-top-right-radius: 40px 20px; /* Radio horizontal: 40px, Radio vertical: 20px */
}

Ejemplos Prácticos

Aquí tienes algunos ejemplos de cómo usar border-radius en diferentes escenarios:

Ejemplo 1: Botones redondeados

<!DOCTYPE html>
<html>
<head>
<style>
  .boton {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
</style>
</head>
<body>

  <button class="boton">Botón Redondeado</button>

</body>
</html>

Ejemplo 2: Imágenes con esquinas suaves

<!DOCTYPE html>
<html>
<head>
<style>
  .imagen-redondeada {
    width: 200px;
    height: auto;
    border-radius: 10px;
  }
</style>
</head>
<body>

  <img src="https://via.placeholder.com/200" alt="Imagen de ejemplo" class="imagen-redondeada">

</body>
</html>

Ejemplo 3: Crear un círculo

<!DOCTYPE html>
<html>
<head>
<style>
  .circulo {
    width: 100px;
    height: 100px;
    background-color: #28a745;
    border-radius: 50%;
  }
</style>
</head>
<body>

  <div class="circulo"></div>

</body>
</html>

Ejemplo 4: Crear una forma de píldora

<!DOCTYPE html>
<html>
<head>
<style>
  .pildora {
    display: inline-block;
    padding: 10px 20px;
    background-color: #dc3545;
    color: white;
    text-align: center;
    border-radius: 50px; /* Un radio grande para redondear completamente los extremos */
  }
</style>
</head>
<body>

  <span class="pildora">Píldora</span>

</body>
</html>

Ejemplo 5: Esquinas específicas redondeadas

<!DOCTYPE html>
<html>
<head>
<style>
  .esquinas-especificas {
    width: 200px;
    height: 100px;
    background-color: #ffc107;
    margin: 20px;
    border-radius: 10px 40px 10px 40px; /* Superior izquierda, superior derecha, inferior derecha, inferior izquierda */
  }
</style>
</head>
<body>

  <div class="esquinas-especificas">Esquinas específicas redondeadas.</div>

</body>
</html>

Casos de Uso Comunes

• Redondear las esquinas de botones, campos de formulario y otros elementos de la interfaz de usuario.
• Crear imágenes con esquinas suaves para un aspecto más moderno.
• Diseñar contenedores y tarjetas con bordes curvos para mejorar la estética.
• Implementar formas personalizadas, como círculos y elipses, utilizando un border-radius apropiado.
• Crear elementos visuales como burbujas de chat o notificaciones con esquinas redondeadas.

Compatibilidad del Navegador

La propiedad border-radius es ampliamente compatible con todos los navegadores modernos.

Consideraciones

• El border-radius se aplica al borde exterior del elemento. Si tienes un borde, la curvatura afectará la forma del borde.
• Puedes usar unidades relativas como % y em para crear radios de borde que se adapten al tamaño del elemento o a su fuente.
• Un border-radius del 50% en un elemento cuadrado creará un círculo. En un elemento rectangular, creará una elipse.
• Experimenta con diferentes valores para lograr el efecto visual deseado.

Conclusión

La propiedad border-radius es una herramienta poderosa y versátil en CSS para dar forma a tus elementos web. Con su flexibilidad para controlar cada esquina individualmente y la capacidad de crear radios elípticos, puedes lograr una amplia gama de efectos visuales que mejorarán la apariencia y la usabilidad de tu sitio web. ¡No dudes en experimentar con diferentes valores para descubrir todas las posibilidades que ofrece border-radius!