Características border-width en CSS

La propiedad border-width abreviada de CSS la cual establece el ancho del marco de un elemento en todas sus caras: superior ( border-top-width), derecha ( border-right-width), inferior ( border-bottom-width) e izquierda ( border-left-width).

Funciones border-width css

Valor inicial	Para cada valor corto: `border-top-width`: `medium` `border-right-width`: `medium` `border-bottom-width`: `medium` `border-left-width`: `medium`
Aplicado a	Todos los artículos.
Heredable	No
Valor calculado	Para cada valor corto: `border-bottom-width`: longitud `<length>`. `border-left-width`: longitud `<length>`. `border-right-width`: longitud `<length>`. `border-top-width`: longitud `<length>`.

/* palabras clave */ 
border-width: thin;
border-width: medium;
border-width: thick;
/* <longitud> longitudes */ 
border-width: 8px;
border-width: 1.5rem;
/* vertical | horizontal */ 
border-width: 3px 1.7em;
/* arriba arriba | horizontal | bottom */ 
border-width: 2px 3em 1.7cm;
/* arriba arriba | derecha derecha | de abajo hacia abajo | izquierda izquierda */ 
border-width: 2px 4em 0 6rem;
/* valores globales */ 
border-width: inherit;
border-width: initial;
border-width: unset;

Ejemplos y aplicaciones en código

En este ejemplo, mostraremos cómo usar la propiedad border-width para establecer el ancho de una ventana especificando uno, dos, tres o cuatro valores en el <p>.

Código HTML:

< p  id = "sval" > 
valor único: ancho del borde 5 píxeles en los cuatro lados 
</ p >

< p  id = "bival" > 
dos valores diferentes: 3 píxeles de ancho desde la parte superior e inferior, 8 píxeles de ancho desde la derecha y la izquierda 
</ p >

< p  id = "treval" > 
 Tres valores diferentes: 8 píxeles desde la parte superior, 0,4 em desde la parte inferior y cero desde la derecha y la izquierda 
</ p >

< p  id = "fourval" >
    Cuatro valores diferentes: "delgado" desde la izquierda, "medio" desde arriba, "grueso" desde abajo, 
1em desde la derecha 
</ p >

Código CSS:

#sval {
  border: dashed #ccc;
  border-width: 5px;
}
#bival {
  border: solid salmon;
  border-width: 3px 8px;
}
#treval {
  border: dotted orange;
  border-width: 0.4em 0 8px;
}
#fourval {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 1em;
  padding: 1em;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	4.0	3,5	1.0

Características generales

La propiedad se puede especificar con un valor border-width, dos valores, tres valores o cuatro valores.

Cuando se especifica un solo valor, se aplicará a todas las facetas del marco.
Cuando se especifican dos valores, el primer valor se aplicará a los marcos superior e inferior, y el segundo valor a los marcos izquierdo y derecho.
En cuando se especifican tres valores, el primer valor se aplicará al marco superior, el segundo valor a los marcos izquierdo y derecho y el tercer valor al marco inferior.
Cuando se especifican cuatro valores, los valores se aplicarán al lado superior, derecho, inferior e izquierdo, respectivamente (es decir, la rotación comienza desde el lado superior y continúa en el sentido de las agujas del reloj).

<br-width>

Este valor define el ancho del marco, ya sea una longitud <length> no negativa o una palabra reservada. Se pueden utilizar las siguientes palabras reservadas:

`thin`	marco delgado
`medium`	marco mediano
`thick`	marco grueso

Nota: Debido a que la especificación no especifica cuál es el valor exacto asociado con cada palabra reservada, el resultado puede variar según el navegador, pero no obstante, estos valores seguirán la relación thin ≤ medium ≤ thick y los valores serán consistentes entre sí en el documento.

Estructura border-width css

border-width: <br-width>{1,4};

dónde:

<br-width> = <length> | thin | medium | thick

Consulte también

La página de propiedades border y otras propiedades que establezca son: border-style y border-color.
La página de propiedades que establece partes del marco: marco superior border-top, border-bottom marco inferior, border-right marco derecho y marco izquierdo border-left.
Configure una imagen para el marco usando la función border-image.
Esquinas redondeadas border-radius.