La Propiedad BORDER-START-START-RADIUS

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

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

Al ser una propiedad lógica, la esquina física que se redondea depende del modo de escritura (writing-mode) y la dirección del texto (direction) del elemento. Esto la convierte en una herramienta poderosa para crear diseños que funcionan bien en diferentes idiomas y sistemas de escritura.

Sintaxis Básica

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

CSS 

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

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

Valores de la Propiedad `border-start-start-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-start-radius: 15px;
}
```
<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-start-radius: 20% 10%; /* 20% del ancho para el radio horizontal, 10% 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-start-radius: 10px 30px; /* Radio horizontal de 10px, radio vertical de 30px */
}
```

¿Qué esquina se ve afectada?

La esquina que border-start-start-radius redondea depende de la configuración de writing-mode y direction:

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

Es importante tener en cuenta estas variaciones para diseñar elementos que se adapten a diferentes contextos lingüísticos y de escritura.

Relación con Otras Propiedades de Borde

border-start-start-radius es la contraparte lógica de la propiedad física border-top-left-radius en un diseño de izquierda a derecha y horizontal. Al utilizar propiedades lógicas como esta, tu CSS se vuelve más semántico y adaptable.

Recuerda que también existen otras propiedades lógicas para las otras esquinas:

border-start-end-radius: Redondea la esquina donde se encuentran el inicio del bloque y el final 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 de cómo usar border-start-start-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-start-radius: 15px; /* Redondea la esquina superior izquierda */
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento tiene la esquina superior izquierda 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-start-radius: 15px; /* Ahora redondea la esquina superior derecha */
  }
</style>
</head>
<body>

  <div class="contenedor">
    <div class="elemento">Este elemento tiene la esquina superior derecha 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-start-radius: 15px; /* Redondea la esquina superior izquierda */
  }
</style>
</head>
<body>

  <div class="elemento">Texto vertical con la esquina superior 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-start-radius: 30px 10px; /* Radio horizontal de 30px, radio vertical de 10px */
  }
</style>
</head>
<body>

  <div class="elemento">Esquina superior izquierda (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 (LTR y RTL).
Diseñar componentes de interfaz de usuario reutilizables que mantengan la coherencia visual en diferentes contextos lingüísticos.
Utilizar propiedades lógicas para simplificar el código CSS y hacerlo más fácil de mantener.

Compatibilidad del Navegador

La propiedad border-start-start-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.

Consideraciones

Asegúrate de definir también las propiedades border-style y border-width para que el radio del borde sea visible.
Considera utilizar las otras propiedades lógicas de radio de borde para tener un control completo sobre las esquinas de tus elementos de forma adaptable.

Conclusión

La propiedad border-start-start-radius es una herramienta valiosa para crear sitios web y aplicaciones web más accesibles y adaptables a diferentes idiomas y modos de escritura. Al utilizar propiedades lógicas, puedes escribir CSS más limpio y semántico que se ajusta automáticamente a las necesidades de tus usuarios internacionales. Experimenta con border-start-start-radius y otras propiedades lógicas para llevar tus habilidades de diseño web al siguiente nivel.