Propiedad CSS border-top-left-radius
La propiedad CSS border-top-left-radius especifica el redondeo de la esquina superior izquierda del elemento.
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 utilizas una imagen de fondo o un color, se recortará según la forma del borde. El comportamiento del recorte está controlado por la propiedad background-clip.
La propiedad border-top-left-radius acepta uno o dos valores, especificados cada uno como <length> o <percentage>. Cuando se utiliza un solo valor, establece tanto el radio horizontal como el vertical de la elipse. Cuando se utilizan dos valores, el primero establece el radio horizontal y el segundo el radio vertical. Los porcentajes para el radio horizontal se refieren al ancho del elemento, mientras que los porcentajes para el radio vertical se refieren a su altura. Los valores negativos no son válidos.
| 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 se utiliza un solo valor. Cuando se usa un solo 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>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>El siguiente ejemplo utiliza valores en 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 en 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>Valores
| Valor | Descripción | Probar |
|---|---|---|
| length | Define el redondeo de la esquina superior izquierda. | Probar » |
| % | Define el redondeo de la esquina superior izquierda en porcentaje. | Probar » |
| initial | Establece la propiedad en su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué hace la propiedad 'border-top-left-radius' en CSS?