
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
yborder-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 izquierdoborder-left
. - Configure una imagen para el marco usando la función
border-image
. - Esquinas redondeadas
border-radius
.
- Característica Box Sizing en CSS
- Característica del Margin en CSS
- Diferencias entre SASS y SCSS
- Característica del Padding en CSS
- Característica de Opacity en CSS
- Característica del Overflow en CSS
- Característica del Color en el CSS
- Característica del Background en CSS
- Característica de Border en CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Características padding en CSS
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Propiedad clear en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Propiedades float en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica background-position en CSS
- Característica box-shadow en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Características border-image-width en CSS
- Características border-left en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Características border-right-color en CSS