La Propiedad BORDER-BOTTOM-LEFT-RADIUS

La propiedad border-bottom-left-radius en CSS se utiliza para redondear la esquina inferior izquierda de un elemento HTML. Permite controlar la curvatura de esta esquina específica, lo que es útil para crear diseños visualmente atractivos y suaves.

Sintaxis Básica

La sintaxis básica para usar la propiedad border-bottom-left-radius es la siguiente:

selector {
  border-bottom-left-radius: <radio>;
}

O, si deseas especificar radios horizontal y vertical diferentes para crear una esquina elíptica:

selector {
  border-bottom-left-radius: <radio-horizontal> <radio-vertical>;
}

Donde <radio>, <radio-horizontal> y <radio-vertical> pueden ser:

• Valores de longitud: Especificados en píxeles (px), ems (em), rems (rem), etc.
• Valores de porcentaje: Especificados como un porcentaje (%) del ancho y la altura del elemento, respectivamente.

Un Solo Valor

Cuando se proporciona un solo valor, este se utiliza tanto para el radio horizontal como para el radio vertical de la esquina inferior izquierda, creando una curva uniforme (como un cuarto de círculo).

Ejemplo:

.elemento-redondeado-simple {
  width: 200px;
  height: 150px;
  background-color: lightblue;
  border-bottom-left-radius: 20px; /* Redondea la esquina inferior izquierda con un radio de 20 píxeles */
}

En este ejemplo, la esquina inferior izquierda del elemento con la clase elemento-redondeado-simple tendrá una curvatura con un radio de 20 píxeles.

También puedes usar porcentajes:

.elemento-redondeado-porcentaje {
  width: 200px;
  height: 150px;
  background-color: lightgreen;
  border-bottom-left-radius: 10%; /* Redondea la esquina inferior izquierda con un radio del 10% del ancho y la altura */
}

Aquí, el radio de la esquina será el 10% del ancho (20px) y el 10% de la altura (15px).

Dos Valores

Cuando se proporcionan dos valores, el primero representa el radio horizontal y el segundo el radio vertical. Esto permite crear esquinas con forma de elipse.

Ejemplo:

.elemento-eliptico {
  width: 200px;
  height: 150px;
  background-color: lightcoral;
  border-bottom-left-radius: 40px 20px; /* Radio horizontal de 40px, radio vertical de 20px */
}

En este caso, la esquina inferior izquierda tendrá una forma elíptica, siendo más ancha que alta en su curvatura.

También puedes usar porcentajes para ambos radios:

.elemento-eliptico-porcentaje {
  width: 200px;
  height: 150px;
  background-color: gold;
  border-bottom-left-radius: 20% 10%; /* Radio horizontal del 20%, radio vertical del 10% */
}

Aquí, el radio horizontal será el 20% del ancho (40px) y el radio vertical será el 10% de la altura (15px).

Representación Visual

Imagina que en la esquina inferior izquierda de un rectángulo, estás dibujando un cuarto de círculo (si usas un solo valor) o un cuarto de elipse (si usas dos valores) que se ajusta a los bordes adyacentes. El radio (o los radios) determina qué tan grande es esa curva.

Relación con Otras Propiedades de border-radius

CSS proporciona otras propiedades para redondear las demás esquinas de un elemento:

• border-top-left-radius: Redondea la esquina superior izquierda.
• border-top-right-radius: Redondea la esquina superior derecha.
• border-bottom-right-radius: Redondea la esquina inferior derecha.

Además, existe la propiedad abreviada border-radius que permite establecer los radios de todas las esquinas de una sola vez. Puedes especificar hasta cuatro valores para redondear las cuatro esquinas, o usar una sintaxis más compleja para controlar cada esquina individualmente.

Ejemplo usando border-radius para redondear solo la esquina inferior izquierda:

.elemento-con-border-radius {
  width: 200px;
  height: 150px;
  background-color: plum;
  border-radius: 0 0 0 30px; /* Superior izquierda, superior derecha, inferior derecha, inferior izquierda */
}

En este caso, solo la esquina inferior izquierda tendrá un radio de 30 píxeles.

Casos de Uso Comunes

• Botones redondeados: Crear botones con esquinas suaves para una apariencia más moderna.
• Contenedores de imágenes: Redondear las esquinas de las imágenes o sus contenedores.
• Burbujas de diálogo: Usar diferentes radios para crear la forma de una burbuja de conversación.
• Diseños con formas personalizadas: Combinar diferentes valores de border-radius para lograr formas más complejas.

Compatibilidad del Navegador

La propiedad border-bottom-left-radius es compatible con la mayoría de los navegadores modernos, incluyendo Chrome, Firefox, Safari, Edge e Internet Explorer (a partir de la versión 9).

Consideraciones

• El redondeo solo será visible si el elemento tiene un background-color o un border.
• Cuando se utilizan porcentajes, el radio horizontal se calcula con respecto al ancho del elemento, y el radio vertical se calcula con respecto a la altura del elemento. Esto puede llevar a formas elípticas si el ancho y la altura son diferentes.

Ejemplo Práctico Completo

<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor {
    display: flex;
    gap: 20px;
  }

  .elemento {
    width: 150px;
    height: 100px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
  }

  .redondeado-px {
    border-bottom-left-radius: 30px;
  }

  .redondeado-porcentaje {
    border-bottom-left-radius: 20%;
  }

  .eliptico-px {
    border-bottom-left-radius: 50px 20px;
  }

  .eliptico-porcentaje {
    border-bottom-left-radius: 30% 10%;
  }
</style>
</head>
<body>

  <div class="contenedor">
    <div class="elemento redondeado-px">30px</div>
    <div class="elemento redondeado-porcentaje">20%</div>
    <div class="elemento eliptico-px">50px 20px</div>
    <div class="elemento eliptico-porcentaje">30% 10%</div>
  </div>

</body>
</html>

En este ejemplo, se muestran cuatro elementos con diferentes valores de border-bottom-left-radius, demostrando el efecto de píxeles y porcentajes, así como el uso de un solo valor y dos valores.

Conclusión

La propiedad border-bottom-left-radius es una herramienta poderosa para estilizar las esquinas de tus elementos web, permitiéndote crear diseños más suaves y personalizados. Experimenta con diferentes valores para lograr la apariencia deseada en tus proyectos.