CSS | propiedad border-top-left-radius

En CSS, la propiedad border-top-left-radius se usa para especificar el radio de la esquina superior izquierda de un elemento .
Nota: El redondeo del borde puede ser un círculo o una elipse según el valor de la propiedad. Si el valor es 0, entonces no hay cambio en el borde, sigue siendo un borde cuadrado.
Sintaxis: 
 

border-top-left-radius: value;

Valor predeterminado: tiene un valor predeterminado, es decir, 0
 

Valores de propiedad: 
 

Valor Funcionalidad
longitud Se utiliza para especificar el radio en términos de valor numérico.
porcentaje Se utiliza para especificar el radio en términos de porcentaje.
inicial Se utiliza para inicializar la propiedad a su valor inicial.
heredar Se utiliza para heredar el valor de su elemento principal.

Ejemplo-1: Uso de «longitud»
 

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | border-top-left-radius Property
    </title>
    <style>
        .gfg {
            border: 2px solid black;
            background: url(
https://media.geeksforgeeks.org/wp-content/uploads/20190405121202/GfGLH.png);
            padding: 100px;
            border-top-left-radius: 75px;
        }
    </style>
</head>
 
<body>
    <div class="gfg">
    </div>
</body>
 
</html>

Producción: 

Ejemplo-2: Uso de «porcentaje»
 

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | border-top-left-radius Property
    </title>
    <style>
        .gfg {
            border: 2px solid black;
            background: url(
https://media.geeksforgeeks.org/wp-content/uploads/20190405121202/GfGLH.png);
            padding: 100px;
            border-top-left-radius: 60%;
        }
    </style>
</head>
 
<body>
    <div class="gfg">
    </div>
</body>
 
</html>

Producción: 

Compatibilidad con navegador: El navegador compatible con CSS | Las propiedades border-top-left-radius se enumeran a continuación: 
 

  • Chrome: 5.0, 4.0 -webkit-
  • Borde: 9.0
  • FireFox: 4.0, 3.0 -moz-
  • Ópera: 10,5
  • Safari: 5.0, 3.1 -webkit-

Publicación traducida automáticamente

Artículo escrito por DannanaManoj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *