La Propiedad BORDER-TOP-RIGHT-RADIUS

La propiedad border-top-right-radius en CSS se utiliza para redondear la esquina superior derecha del borde de un elemento HTML.

La propiedad border-top-right-radius en CSS se utiliza para redondear la esquina superior derecha del borde de un elemento HTML. Al igual que border-top-left-radius, border-bottom-right-radius y border-bottom-left-radius, te permite controlar el radio de curvatura de esta esquina específica.

Sintaxis Básica

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

CSS 

selector {
  border-top-right-radius: <radio>;
}

Donde <radio> puede ser un valor único o dos valores.

Valores de la Propiedad `border-top-right-radius`

Un Valor: Si proporcionas un solo valor, este se utilizará tanto para el radio horizontal como para el radio vertical de la esquina superior derecha, creando una curva circular. Puedes usar unidades de longitud (como píxeles, ems, rems) o porcentajes.

CSS 

.redondeado-simple {
  border-top-right-radius: 15px; /* Radio de 15 píxeles en ambas direcciones */
}

.redondeado-em {
  border-top-right-radius: 0.8em; /* Radio de 0.8 veces el tamaño de la fuente */
}

.redondeado-porcentaje {
  border-top-right-radius: 30%; /* Radio del 30% del ancho y alto del borde */
}

Dos Valores: Si proporcionas dos valores separados por un espacio, el primero representa el radio horizontal y el segundo representa el radio vertical. Esto te permite crear una esquina con forma de elipse.
CSS
```
.redondeado-eliptico {
  border-top-right-radius: 25px 10px; /* Radio horizontal de 25 píxeles, radio vertical de 10 píxeles */
}
```

Relación con la Propiedad `border-radius`

border-top-right-radius es una de las cuatro propiedades específicas que componen la propiedad abreviada border-radius. Puedes usar border-radius para establecer los radios de las cuatro esquinas a la vez, o usar las propiedades individuales para un control más preciso.

Por ejemplo, las siguientes declaraciones son equivalentes si solo quieres redondear la esquina superior derecha:

CSS 

.ejemplo-1 {
  border-top-right-radius: 10px;
}

.ejemplo-2 {
  border-radius: 0 10px 0 0; /* Superior izquierda, superior derecha, inferior derecha, inferior izquierda */
}

Ejemplos Prácticos

Aquí tienes algunos ejemplos de cómo usar border-top-right-radius:

Ejemplo 1: Redondeando solo la esquina superior derecha

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin: 20px;
    border: 2px solid black;
    border-top-right-radius: 20px;
  }
</style>
</head>
<body>

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

</body>
</html>

Ejemplo 2: Usando un radio elíptico

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #e0e0e0;
    margin: 20px;
    border: 2px solid blue;
    border-top-right-radius: 40px 15px;
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento tiene la esquina superior derecha con un radio elíptico.</div>

</body>
</html>

Ejemplo 3: Combinando con otras propiedades border-radius

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #d0d0d0;
    margin: 20px;
    border: 2px solid green;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento tiene las esquinas superior derecha e inferior izquierda redondeadas.</div>

</body>
</html>

Ejemplo 4: Usando porcentajes

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 150px;
    height: 150px;
    background-color: #ffc107;
    margin: 20px;
    border: 2px solid black;
    border-top-right-radius: 50%; /* En un cuadrado, esto podría contribuir a una forma circular parcial */
  }
</style>
</head>
<body>

  <div class="elemento">Esquina superior derecha redondeada con un porcentaje.</div>

</body>
</html>

Casos de Uso Comunes

Redondear la esquina superior derecha de elementos como pestañas de navegación, contenedores o mensajes.
Crear efectos visuales específicos en combinación con otras propiedades de borde.
Diseñar interfaces de usuario con un estilo suave y moderno.

Compatibilidad del Navegador

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

Consideraciones

Asegúrate de tener un border-style definido (que no sea none) para que el radio del borde sea visible.
Experimenta con diferentes valores para lograr el nivel de redondeo deseado.
Los porcentajes se calculan en relación con las dimensiones del borde, por lo que el resultado puede variar según el tamaño del elemento.

Conclusión

La propiedad border-top-right-radius te brinda un control preciso sobre la forma de la esquina superior derecha de tus elementos web. Al combinarla con otras propiedades de borde y radios, puedes crear una amplia variedad de diseños visualmente atractivos y mejorar la experiencia del usuario en tu sitio web. ¡No dudes en explorar las posibilidades!