CSS | Propiedad border-left-width

La propiedad border-left-width se utiliza para establecer el ancho del borde izquierdo de un elemento. Es obligatorio declarar la propiedad border-style o border-left-style antes que la propiedad border-left-color.

Sintaxis:

border-left-width: medium|thin|thick|length|initial|inherit;

Valores de propiedad

medium : Tiene un valor por defecto. Se utiliza para especificar un tamaño medio del borde izquierdo.

Sintaxis:
```
border-left-width:medium;
```

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-left-width Property
    </title>
    <style>
        h1 {
            color: green;
        }
          
        h3 {
            border: solid green;
            border-left-width: medium;
            width: 50%;
        }
    </style>
</head>
  
<body>
    <center>
  
        <h1>GeeksForGeeks</h1>
        <h2>border-left-width:medium;</h2>
        <h3>GeeksForGeeks</h3>
        
        <p style="border-style:dotted;
                  border-left-width:medium;
                  width:70%;">
          It is a computer science portal for geeks.</p>
  
        
</body>
  
</html>

Producción:

thin: Especifica un borde izquierdo delgado.

Sintaxis:
```
border-left-width:thin;
```

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-left-width Property
    </title>
    <style>
        h1 {
            color: green;
        }
          
        h3 {
            border: solid green;
            border-left-width: thin;
            width: 50%;
        }
    </style>
</head>
  
<body>
    <center>
  
        <h1>GeeksForGeeks</h1>
        <h2>border-left-width:thin;</h2>
        <h3>GeeksForGeeks</h3>
        
        <p style="border-style:dotted;
                  border-left-width:thin;
                  width:70%;">
          It is a computer science portal for geeks.</p>
  
</body>
  
</html>

Producción:

grueso: especifica un borde izquierdo grueso de un elemento.

Sintaxis:
```
border-left-width:thick;
```

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-left-width Property
    </title>
    <style>
        h1 {
            color: green;
        }
          
        h3 {
            border: solid green;
            border-left-width: thick;
            width: 50%;
        }
    </style>
</head>
  
<body>
    <center>
  
        <h1>GeeksForGeeks</h1>
        <h2>border-left-width:thick;</h2>
        <h3>GeeksForGeeks</h3>
        
        <p style="border-style:dotted;
                  border-left-width:thick;
                  width:70%;">
          It is a computer science portal for geeks.</p>
  
</body>
  
</html>

Producción:

longitud: especifica el grosor del borde izquierdo en términos de píxeles.

Sintaxis:
```
border-left-width: length;
```

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-left-width Property
    </title>
    <style>
        h1 {
            color: green;
        }
          
        h3 {
            border: solid green;
            border-left-width: 10px;
            width: 50%;
        }
    </style>
</head>
  
<body>
    <center>
  
        <h1>GeeksForGeeks</h1>
        <h2>border-left-width:length;</h2>
        <h3>GeeksForGeeks</h3>
        
        <p style="border-style:dotted;
                  border-left-width:5px;
                  width:70%;">
          It is a computer science portal for geeks.</p>
  
</body>
  
</html>

Producción:

initial: Establece la propiedad a su valor por defecto.

Sintaxis:
```
border-left-width:initial;
```

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-left-width Property
    </title>
    <style>
        h1 {
            color: green;
        }
          
        h3 {
            border: solid green;
            border-left-width: initial;
            width: 50%;
        }
    </style>
</head>
  
<body>
    <center>
  
        <h1>GeeksForGeeks</h1>
        <h2>border-left-width:initial;</h2>
        <h3>GeeksForGeeks</h3>
        
        <p style="border-style:dotted;
                  border-left-width:initial;
                  width:70%;">
          It is a computer science portal for geeks.</p>
  
</body>
  
</html>

Producción:

Navegadores compatibles: los navegadores compatibles con la propiedad CSS border-left-width se enumeran a continuación:

Google Chrome 1.0
Internet Explorer 4.0
Firefox 1.0
Ópera 3.5
Apple Safari 1.0

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta