La Propiedad BORDER-START-END-RADIUS

La propiedad border-start-end-radius en CSS es una propiedad lógica que define el radio del borde en la esquina donde el borde del inicio del bloque (block-start) y el borde del final de la línea (inline-end) de un elemento se encuentran.

La propiedad border-start-end-radius en CSS es una propiedad lógica que define el radio del borde en la esquina donde el borde del inicio del bloque (block-start) y el borde del final de la línea (inline-end) de un elemento se encuentran.

Como propiedad lógica, su efecto físico real (es decir, qué esquina específica se redondea) depende del modo de escritura (writing-mode) y la dirección del texto (direction) del elemento. Esto la hace muy útil para crear diseños que se adaptan correctamente a diferentes idiomas y sistemas de escritura.

Sintaxis Básica

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

CSS 

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

Donde <radio> puede ser un valor único o dos valores, similares a la propiedad border-radius.

Valores de la Propiedad `border-start-end-radius`

Puedes utilizar los siguientes tipos de valores para especificar el radio del borde:

<length>: Un valor de longitud absoluto (por ejemplo, px, em, rem) o relativo (por ejemplo, vw, vh).
CSS
```
.ejemplo {
  border-start-end-radius: 10px;
}
```
<percentage>: Un valor de porcentaje relativo a la dimensión correspondiente de la caja del borde. Para el radio horizontal, el porcentaje se refiere al ancho de la caja del borde. Para el radio vertical, se refiere a la altura de la caja del borde.
CSS
```
.ejemplo {
  width: 200px;
  height: 100px;
  border-start-end-radius: 10% 20%; /* 10% del ancho para el radio horizontal, 20% de la altura para el radio vertical */
}
```
Dos Valores (Radio Elíptico): Puedes especificar dos valores separados por un espacio. El primer valor representa el radio horizontal y el segundo valor representa el radio vertical. Esto permite crear esquinas con forma de elipse.
CSS
```
.ejemplo {
  border-start-end-radius: 20px 5px; /* Radio horizontal de 20px, radio vertical de 5px */
}
```

¿Qué esquina se ve afectada?

La clave para entender border-start-end-radius es comprender cómo se definen el inicio del bloque y el final de la línea:

Inicio del Bloque (Block-Start): En un modo de escritura horizontal, es la parte superior. En un modo de escritura vertical, depende de la dirección del bloque (generalmente la izquierda).
Final de la Línea (Inline-End): En un modo de escritura de izquierda a derecha (LTR), es la derecha. En un modo de escritura de derecha a izquierda (RTL), es la izquierda.

Basándonos en esto, la esquina afectada por border-start-end-radius variará:

writing-mode: horizontal-tb; direction: ltr; (Predeterminado): La esquina inferior derecha.
writing-mode: horizontal-tb; direction: rtl;: La esquina inferior izquierda.
writing-mode: vertical-lr; direction: ltr;: La esquina inferior izquierda.
writing-mode: vertical-rl; direction: ltr;: La esquina superior derecha.

Puedes consultar la documentación de MDN para una tabla más completa de cómo se mapea a las esquinas físicas en diferentes combinaciones de writing-mode y direction.

Relación con Otras Propiedades de Borde

border-start-end-radius es similar a las propiedades físicas como border-bottom-right-radius, pero su comportamiento es lógico y se adapta al contexto de escritura.

También existen otras propiedades lógicas relacionadas para controlar las demás esquinas:

border-start-start-radius: Redondea la esquina donde se encuentran el inicio del bloque y el inicio de la línea.
border-end-start-radius: Redondea la esquina donde se encuentran el final del bloque y el inicio de la línea.
border-end-end-radius: Redondea la esquina donde se encuentran el final del bloque y el final de la línea.

Ejemplos Prácticos

Veamos algunos ejemplos para ilustrar cómo funciona border-start-end-radius:

Ejemplo 1: Modo de escritura horizontal (LTR)

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin: 20px;
    border: 2px solid black;
    border-start-end-radius: 20px; /* Redondea la esquina inferior derecha */
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento tiene la esquina inferior derecha redondeada.</div>

</body>
</html>

Ejemplo 2: Modo de escritura horizontal (RTL)

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor {
    direction: rtl;
  }
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #e0e0e0;
    margin: 20px;
    border: 2px solid blue;
    border-start-end-radius: 20px; /* Ahora redondea la esquina inferior izquierda */
  }
</style>
</head>
<body>

  <div class="contenedor">
    <div class="elemento">Este elemento tiene la esquina inferior izquierda redondeada en RTL.</div>
  </div>

</body>
</html>

Ejemplo 3: Modo de escritura vertical (LR)

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 80px;
    height: 150px;
    background-color: #f0f0f0;
    margin: 20px;
    writing-mode: vertical-lr;
    border: 2px solid green;
    border-start-end-radius: 20px; /* Redondea la esquina inferior izquierda */
  }
</style>
</head>
<body>

  <div class="elemento">Texto vertical con la esquina inferior izquierda redondeada.</div>

</body>
</html>

Ejemplo 4: Radio elíptico

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #e0e0e0;
    margin: 20px;
    border: 2px solid purple;
    border-start-end-radius: 30px 10px; /* Radio horizontal de 30px, radio vertical de 10px */
  }
</style>
</head>
<body>

  <div class="elemento">Esquina inferior derecha (en LTR) con radio elíptico.</div>

</body>
</html>

Casos de Uso Comunes

Crear diseños que se adapten automáticamente a diferentes direcciones de texto sin necesidad de reglas CSS específicas para cada dirección.
Implementar componentes de interfaz de usuario que deben mantener una coherencia visual independientemente del idioma.
Simplificar el código CSS al utilizar propiedades lógicas en lugar de tener que gestionar múltiples propiedades físicas.

Compatibilidad del Navegador

La propiedad border-start-end-radius es parte de las especificaciones de propiedades lógicas de CSS y tiene un buen soporte en los navegadores modernos. Sin embargo, es posible que navegadores más antiguos no la soporten. Consulta la documentación de MDN para obtener la información de compatibilidad más actualizada.

Consideraciones

Recuerda que también debes definir un border-style y un border-width para que el radio del borde sea visible.
Utiliza las otras propiedades lógicas de radio de borde (border-start-start-radius, border-end-start-radius, border-end-end-radius) para controlar las demás esquinas de manera lógica.

Conclusión

La propiedad border-start-end-radius es una herramienta valiosa para crear diseños web más flexibles y adaptables a diferentes contextos de escritura. Al comprender cómo se mapea a las esquinas físicas según el modo de escritura y la dirección, puedes utilizarla para simplificar tu código CSS y mejorar la internacionalización de tus aplicaciones web. Te animamos a experimentar con esta y otras propiedades lógicas para aprovechar sus beneficios.