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:
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:
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:
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:
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:
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:
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