La Propiedad BORDER-END-START-RADIUS

Se utiliza para redondear la esquina de un elemento que se encuentra al final de la dimensión del bloque y al inicio de la dimensión en línea.

La propiedad border-end-start-radius en CSS se utiliza para redondear la esquina de un elemento que se encuentra al final de la dimensión del bloque y al inicio de la dimensión en línea. Al igual que otras propiedades con los sufijos -start y -end, forma parte de las Propiedades Lógicas de CSS. Esto significa que la esquina exacta que se redondea dependerá del modo de escritura y la dirección del texto del elemento.

En la mayoría de los idiomas (como el español), donde el modo de escritura es horizontal de arriba a abajo (horizontal-tb) y la dirección es de izquierda a derecha (ltr), border-end-start-radius afectará la esquina inferior izquierda del elemento. Sin embargo, en otros modos de escritura (como vertical-rl o rtl), esta propiedad se aplicará a una esquina diferente.

Sintaxis Básica

La sintaxis básica para usar la propiedad border-end-start-radius es la siguiente:

CSS
 
selector {
  border-end-start-radius: <radio>;
}

O, si deseas especificar radios para la dimensión en línea y la dimensión del bloque por separado:

CSS
 
selector {
  border-end-start-radius: <radio-en-linea> <radio-en-bloque>;
}

Donde <radio>, <radio-en-linea> y <radio-en-bloque> pueden ser:

  • Valores de longitud: Especificados en píxeles (px), ems (em), rems (rem), etc.
  • Valores de porcentaje: Especificados como un porcentaje (%) de la dimensión en línea (ancho en modo horizontal) y la dimensión del bloque (altura en modo horizontal) del elemento, respectivamente.

Un Solo Valor

Cuando se proporciona un solo valor, este se utiliza tanto para el radio en la dimensión en línea como para el radio en la dimensión del bloque, creando una curva uniforme (como un cuarto de círculo) en la esquina final-inicio.

Ejemplo (Modo de escritura horizontal, dirección ltr):

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

En este caso, la esquina inferior izquierda del elemento tendrá una curvatura con un radio de 30 píxeles.

También puedes usar porcentajes:

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

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

Dos Valores

Cuando se proporcionan dos valores, el primero representa el radio en la dimensión en línea y el segundo el radio en la dimensión del bloque. Esto permite crear esquinas con forma de elipse.

Ejemplo (Modo de escritura horizontal, dirección ltr):

CSS
 
.elemento-eliptico {
  width: 200px;
  height: 150px;
  background-color: lightcoral;
  border-end-start-radius: 50px 20px; /* Radio en línea de 50px, radio en bloque 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:

CSS
 
.elemento-eliptico-porcentaje {
  width: 200px;
  height: 150px;
  background-color: gold;
  border-end-start-radius: 25% 10%; /* Radio en línea del 25%, radio en bloque del 10% */
}

Aquí, el radio en línea será el 25% del ancho (50px) y el radio en bloque será el 10% de la altura (15px).

Comportamiento en Diferentes Modos de Escritura y Direcciones

La verdadera potencia de las propiedades lógicas como border-end-start-radius radica en su capacidad para adaptarse a diferentes contextos de escritura:

  • horizontal-tb (predeterminado), ltr: La esquina inferior izquierda se redondea.
  • horizontal-tb, rtl: La esquina inferior derecha se redondea.
  • vertical-rl, ltr: La esquina superior izquierda se redondea.
  • vertical-rl, rtl: La esquina superior derecha se redondea.
  • vertical-lr, ltr: La esquina inferior derecha se redondea.
  • vertical-lr, rtl: La esquina inferior izquierda se redondea.

Ejemplo con modo de escritura de derecha a izquierda (horizontal-tb, rtl):

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento-rtl {
    width: 200px;
    height: 150px;
    background-color: orange;
    direction: rtl; /* Dirección de derecha a izquierda */
    border-end-start-radius: 40px; /* Redondea la esquina inferior derecha */
  }
</style>
</head>
<body>

  <div class="elemento-rtl">Texto de Derecha a Izquierda</div>

</body>
</html>

En este caso, debido a la dirección del texto rtl, la esquina inferior derecha del elemento será redondeada.

Relación con Otras Propiedades Lógicas de border-radius

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

  • border-start-start-radius: Redondea la esquina al inicio de la dimensión del bloque y al inicio de la dimensión en línea.
  • border-start-end-radius: Redondea la esquina al inicio de la dimensión del bloque y al final de la dimensión en línea.
  • border-end-end-radius: Redondea la esquina al final de la dimensión del bloque y al final de la dimensión en línea.

También existe la propiedad abreviada lógica border-radius que permite establecer los radios de todas las esquinas lógicas de una sola vez.

Casos de Uso Comunes

  • Diseños adaptables a diferentes idiomas: Asegurar que las esquinas redondeadas se apliquen correctamente independientemente de la dirección del texto.
  • Componentes de interfaz de usuario reutilizables: Crear componentes que funcionen bien en diferentes contextos de escritura.
  • Estilos consistentes en aplicaciones internacionalizadas.

Compatibilidad del Navegador

Las propiedades lógicas de border-radius, incluyendo border-end-start-radius, tienen buena compatibilidad con los navegadores modernos. Sin embargo, es posible que navegadores más antiguos no las soporten completamente, por lo que a veces se recomienda usar las propiedades físicas correspondientes (como border-bottom-left-radius) para una mayor compatibilidad.

Consideraciones

  • El redondeo solo será visible si el elemento tiene un background-color o un border.
  • Cuando se utilizan porcentajes, el radio en la dimensión en línea se calcula con respecto al ancho en modo horizontal (o altura en modo vertical), y el radio en la dimensión del bloque se calcula con respecto a la altura en modo horizontal (o ancho en modo vertical).

Ejemplo Práctico Completo

HTML
 
<!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-end-start-radius: 30px;
  }

  .redondeado-porcentaje {
    border-end-start-radius: 20%;
  }

  .eliptico-px {
    border-end-start-radius: 50px 20px;
  }

  .eliptico-porcentaje {
    border-end-start-radius: 30% 10%;
  }

  .elemento-rtl {
    direction: rtl; /* Dirección de derecha a izquierda */
  }

  .elemento-vertical {
    writing-mode: vertical-rl; /* Modo de escritura vertical (derecha a izquierda) */
  }
</style>
</head>
<body>

  <h2>Modo Horizontal (LTR - Predeterminado)</h2>
  <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>

  <h2>Modo Horizontal (RTL)</h2>
  <div class="contenedor">
    <div class="elemento elemento-rtl redondeado-px">30px</div>
    <div class="elemento elemento-rtl redondeado-porcentaje">20%</div>
    <div class="elemento elemento-rtl eliptico-px">50px 20px</div>
    <div class="elemento elemento-rtl eliptico-porcentaje">30% 10%</div>
  </div>

  <h2>Modo Vertical (RL, LTR)</h2>
  <div class="contenedor">
    <div class="elemento elemento-vertical redondeado-px">30px</div>
    <div class="elemento elemento-vertical redondeado-porcentaje">20%</div>
    <div class="elemento elemento-vertical eliptico-px">50px 20px</div>
    <div class="elemento elemento-vertical eliptico-porcentaje">30% 10%</div>
  </div>

</body>
</html>

En este ejemplo, puedes observar cómo la esquina redondeada por border-end-start-radius cambia según la dirección del texto y el modo de escritura.

Conclusión

La propiedad border-end-start-radius es una herramienta valiosa para crear esquinas redondeadas en diseños web que deben ser flexibles y adaptarse a diferentes idiomas y modos de escritura. Al entender su comportamiento lógico, puedes construir interfaces de usuario más robustas e internacionalizables.