CSS | Propiedad de ancho de borde

La propiedad border-width en CSS se usa para establecer el ancho del borde de los cuatro lados de un elemento. La propiedad border-width es la combinación de cuatro propiedades

Valor por defecto: 

  • medio 

Sintaxis: 

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

Valores de propiedad:  

  • longitud: Se utiliza para establecer el ancho del borde. No toma valor negativo.
  • delgado: se utiliza para establecer el borde delgado en la parte superior del elemento.
  • medio: se utiliza para establecer un borde superior de tamaño medio. Es el valor predeterminado.
  • grueso: Se utiliza para establecer el borde superior grueso.
  • initial: se utiliza para establecer el ancho superior del borde en su valor predeterminado.
  • heredar: esta propiedad se hereda de su padre.

Ejemplo 1: este ejemplo establece border-width en un solo valor para todos los lados. 
ancho de borde: val;  

  • borde-superior-ancho: val;
  • borde-derecho-ancho: val;
  • borde-inferior-ancho: val;
  • borde-izquierdo-ancho: val;

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>
            border-width property
        </title>
         
        <style>
            div {
                margin-bottom: 10px;
                border-style: solid;
            }
        </style>
    </head>
     
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
         
         
 
<p>border-width property: [value]</p>
 
 
     
        <!-- This div has a uniform border
        of 10px around it. -->
        <div style="border-width: 10px">
            This div has a border around it of 10px.
        </div>
     
        <!-- This div has a uniform thin
        border around it. -->
        <div style="border-width: thin">
            This div has a thin border.
        </div>
     
        <!-- This div has a uniform medium
        border around it. -->
        <div style="border-width: medium">
            This div has a medium border.
        </div>
     
        <!-- This div has a uniform thick
        border around it. -->
        <div style="border-width: thick">
            This div has a thick border.
        </div>
    </body>
</html>                   

Producción: 

border-width with one value

Ejemplo 2: Este ejemplo contiene dos valores de border-width. 
ancho de borde: val1 val2;  

  • borde-superior-ancho: val1;
  • borde-derecho-ancho: val2;
  • borde-inferior-ancho: val1;
  • borde-izquierdo-ancho: val2;

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>
            border-width property
        </title>
         
        <style>
            div {
                margin-bottom: 10px;
                border-style: solid;
            }
        </style>
    </head>
     
    <body>
        <h1 style = "color: green">
            GeeksforGeeks
        </h1>
         
         
 
<p>border-width property: [value] [value]</p>
 
 
     
        <!-- This div has a 5px border on the top and
        bottom, and 30px on the left and right. -->
        <div style = "border-width: 5px 30px">
            This div has a border of 5px on the top and
            bottom, and 30px on the left and right.
        </div>
     
        <!-- This div has a thin border on the top and
        bottom, and thick on the left and right. -->
        <div style = "border-width: thin thick">
            This div has a thin border on the top and bottom,
            and thick border on the left and right.
        </div>
    </body>
</html>                   

Producción: 

border-width with two values

Ejemplo 3: este ejemplo establece el ancho del borde en tres valores. 
ancho de borde: val1 val2 val3;  

  • borde-superior-ancho: val1;
  • borde-derecho-ancho: val2;
  • borde-inferior-ancho: val3;
  • borde-izquierdo-ancho: val2;

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>
            border-width property
        </title>
         
        <style>
            div {
                margin-bottom: 10px;
                border-style: solid;
            }
        </style>
    </head>
     
    <body>
        <h1 style="color: green">GeeksforGeeks</h1>
         
         
 
<p>
            border-width property: [value] [value] [value]
        </p>
 
 
     
        <!-- This div has a 5px border on the top, 30px
        on the left and right, and 15px on the bottom. -->
        <div style = "border-width: 5px 30px 15px">
            This div has a 5px border on the top, 30px on
            the left and right, and 15px on the bottom.
        </div>
     
        <!-- This div has a thin border on the top, a thick
        border on the left and right,and a medium border
        on the bottom. -->
        <div style = "border-width: thin thick medium">
            This div has a thin border on the top, a thick
            border on the left and right, and a medium
            border on the bottom.
        </div>
    </body>
</html>                   

Producción:

border-width with three values

Ejemplo 4: este ejemplo contiene cuatro valores para la propiedad border-width. 
ancho de borde: val1 val2 val3 val4;  

  • borde-superior-ancho: val1;
  • borde-derecho-ancho: val2;
  • borde-inferior-ancho: val3;
  • borde-izquierdo-ancho: val4;

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>
            border-width property
        </title>
         
        <style>
            div {
                margin-bottom: 10px;
                border-style: solid;
            }
        </style>
    </head>
     
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
         
         
 
<p>
            border-width property:
            [value] [value] [value] [value]
        </p>
 
 
     
        <!-- This div has a border of 5px on the top,
        30px on the right, 15px on the bottom, and
        2px on the left. -->
        <div style = "border-width: 5px 30px 15px 2px">
            This div has a border of 5px on the top,
            30px on the right, 15px on the bottom,
            and 2px on the left.
        </div>
     
        <!-- This div has a thin border on the top,
        thick border on right, medium border on the
        bottom, and thin border on the left. -->
        <div style = "border-width: thin thick medium thin">
            This div has a thin border on the top, thick
            border on right, medium border on the bottom,
            and thin border on the left.
        </div>
    </body>
</html>                   

Producción: 

border-width with four values

Ejemplo 5: Este ejemplo describe el valor inicial de la propiedad border-width.  

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>
            border-width property
        </title>
         
        <style>
            div {
                margin-bottom: 10px;
                border-style: solid;
            }
        </style>
    </head>
     
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
         
         
 
<p>border-width property: initial</p>
 
 
     
        <!-- This div has the border width set
        to initial. -->
        <div style="border-width: initial">
            This div has the default border width,
            which is the medium border.
        </div>
    </body>
</html>                   

Producción: 

border-width initial

Ejemplo 6: Este ejemplo describe la propiedad de herencia.  

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>
            border-width property
        </title>
         
        <style>
            div {
                margin: 10px;
                border-style: solid;
            }
        </style>
    </head>
     
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
         
         
 
<p>border-width property: inherit</p>
 
 
     
        <!-- This div is the parent with the border
        width set to thick. -->
        <div id="parent" style="border-width: thin">
            This is the parent div.
     
            <!-- This div inherits the border width
            from the parent div. -->
            <div style="border-width: inherit">
                This div inherits the border width
                from the parent.
            </div>
        </div>
    </body>
</html>                   

Producción: 

border-width inherit

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

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

Publicación traducida automáticamente

Artículo escrito por sayantanm19 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 *