Propiedad CSS border-top-left-radius

La propiedad CSS border-top-left-radius redondea la esquina superior izquierda del cuadro de borde de un elemento. Es una de las cuatro propiedades extendidas — junto con border-top-right-radius, border-bottom-left-radius y border-bottom-right-radius — en las que se expande la forma abreviada border-radius. Usa esta propiedad extendida cuando solo quieras redondear una esquina.

La propiedad border-top-left-radius es una de las propiedades de CSS3.

La esquina puede redondearse en forma de círculo o elipse, o permanecer cuadrada si no se especifica ningún valor. Si usas una imagen de fondo o un color, se recortará según la forma del borde. El comportamiento de recorte está controlado por la propiedad background-clip.

Cómo funcionan los valores

La propiedad border-top-left-radius acepta uno o dos valores, cada uno especificado como <length> o <percentage>:

Un valor establece tanto el radio horizontal como el vertical de la esquina, produciendo una curva circular (cuarto de círculo).
Dos valores establecen los radios de una elipse: el primero es el radio horizontal y el segundo el radio vertical.

Los porcentajes para el radio horizontal hacen referencia al ancho del elemento, mientras que los porcentajes para el radio vertical hacen referencia a su alto. Los valores negativos no son válidos y la declaración se ignora.

Advertencia: si la suma de los radios en un lado supera la longitud de ese lado, el navegador reduce proporcionalmente todos los radios de las esquinas para que las curvas nunca se superpongan. Por tanto, un valor muy grande como border-top-left-radius: 9999px es una forma segura de redondear una esquina tanto como el cuadro lo permita.

Valor inicial	0
Se aplica a	Todos los elementos. También se aplica a ::first-letter.
Heredado	No
Animable	Sí. El radio del borde es animable.
Versión	CSS3
Sintaxis DOM	object.style.borderTopLeftRadius = "25px";

Sintaxis

Sintaxis de la propiedad CSS border-top-left-radius

border-top-left-radius: length | % | initial | inherit;

A continuación se muestra un ejemplo de border-top-left-radius donde solo se usa un valor. Cuando se usa un único valor, establece tanto el radio horizontal como el vertical de la elipse.

Ejemplo de la propiedad border-top-left-radius:

Ejemplo de la propiedad CSS border-top-left-radius con un solo valor

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        height: 40px;
        background: #8ebf42;
        border: 4px solid #000000;
        border-top-left-radius: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-left-radius example.</h2>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

En el siguiente ejemplo, el primer valor establece el radio horizontal y el segundo establece el radio vertical.

Ejemplo de la propiedad border-top-left-radius con dos valores:

Ejemplo de la propiedad CSS border-top-left-radius con dos valores

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        height: 40px;
        background: #ccc;
        border: 4px solid #000000;
        border-top-left-radius: 50px 25px;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-left-radius example.</h2>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

El siguiente ejemplo usa valores de porcentaje. El primer valor define el radio horizontal y el segundo define el radio vertical.

Ejemplo de la propiedad border-top-left-radius con el valor "%":

Ejemplo de la propiedad CSS border-top-left-radius con valor de porcentaje

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        height: 40px;
        background: #eee;
        border: 4px solid #000000;
        border-top-left-radius: 50% 60%;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-left-radius example.</h2>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción	Pruébalo
length	Define el redondeo de la esquina superior izquierda.	Pruébalo »
%	Define el redondeo de la esquina superior izquierda en porcentaje.	Pruébalo »
initial	Establece la propiedad a su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Cuándo usar la propiedad extendida

Usa border-top-left-radius cuando solo una esquina necesite redondearse — por ejemplo, una pestaña, un globo de diálogo o una tarjeta cuyo borde superior queda alineado con un encabezado. Para redondear todas las esquinas a la vez, la forma abreviada border-radius es más concisa:

/* These two rules are equivalent for a single corner */
border-top-left-radius: 25px;
border-radius: 25px 0 0 0;

Propiedades relacionadas

border-radius — forma abreviada para las cuatro esquinas.
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
border — establece el ancho, el estilo y el color del borde.

Compatibilidad con navegadores

border-top-left-radius es compatible con todos los navegadores modernos (Chrome, Firefox, Safari, Edge) sin necesidad de prefijo de proveedor.

Práctica

¿Qué hace la propiedad 'border-top-left-radius' en CSS?

Permite agregar bordes redondeados a un elemento HTML.Cambia el color del borde de un elemento HTML.Modifica específicamente el radio superior izquierdo del borde.Redimensiona el borde de un elemento HTML.Cambia el tamaño de fuente de un elemento HTML.