Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad de ancho de borde
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada ancho del borde Con sintaxis y ejemplos.
describir
La propiedad border-width de CSS define el ancho del borde de un cuadro.
sintaxis
La propiedad border-width de CSS se puede representar mediante uno, dos, tres o cuatro de los valores proporcionados.
sintaxis – un valor
Sintaxis de CSS propiedad de ancho de borde (con 1 valor) es:
border-width: all;Cuando se proporciona un valor, el valor del ancho del borde se aplicará a los cuatro lados del cuadro (es decir, arriba, derecha, abajo, izquierda).
Sintaxis – dos valores
Sintaxis de CSS propiedad de ancho de borde (con 2 valores) es:
border-width: top_bottom left_right;Cuando se proporcionan dos valores, el primer valor se aplicará a la parte superior e inferior del cuadro. El segundo valor se aplicará a los lados izquierdo y derecho del cuadro.
Sintaxis – tres valores
Sintaxis de CSS propiedad de ancho de borde (con 3 valores) es:
border-width: top right_left bottom;Cuando se proporcionen tres valores, el primer valor se aplicará en la parte superior del cuadro. El segundo valor se aplicará a los lados derecho e izquierdo del cuadro. El tercer valor se aplicará en la parte inferior del cuadro.
Sintaxis: cuatro valores
Sintaxis de CSS propiedad de ancho de borde (con 4 valores) es:
border-width: top right bottom left;Cuando se proporcionan cuatro valores, el primer valor se aplicará en la parte superior del cuadro. El segundo valor se aplicará al lado derecho del cuadro. El tercer valor se aplicará en la parte inferior del cuadro. El cuarto valor se aplicará al lado izquierdo del cuadro.
Los valores de relleno superior, derecho, inferior e izquierdo pueden ser uno de los siguientes:
| valor | describir |
|---|---|
| estable | valor fijo en px, em, … div {ancho del borde: 2px;} div {ancho del borde: 1em 1px;} div {ancho del borde: 2px 5px 4px;} div {ancho del borde: 4px 0 2px 3px; } |
| finamente | Ancho de borde delgado, puede ser 1px o 2px dependiendo del navegador div {borde-ancho: delgado;} |
| Moderar | Ancho de borde medio, puede ser de 3px o 4px dependiendo del navegador div {borde-ancho: medio;} |
| Grueso | Ancho de borde grueso, puede ser 5px o 6px según el navegador div {borde-ancho: grueso;} |
notas
- Puede combinar valores finos, medios, gruesos y fijos en la propiedad border-width de CSS.
- Consulte también propiedades de borde, color de borde y estilo de borde.
Compatibilidad del navegador
La propiedad border-width de CSS tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- androide
- Firefox (Geco)
- Firefox móvil (Geco)
- Navegador de Internet (IE)
- es decir, móvil
- ópera
- Ópera Móvil
- Safari (WebKit)
- Safari para móvil
ejemplo
Analizaremos la propiedad border-width a continuación, explorando ejemplos de cómo usar esta propiedad para valores de 1, 2, 3 o 4 en CSS.
div { border-width: 2px; }En este ejemplo de ancho de borde CSS, proporcionamos un valor de 2px, que se aplicará a los 4 lados del cuadro.
A continuación, veremos un ancho de borde CSS de ejemplo que proporciona dos valores.
div { border-width: 5px medium; }En este ejemplo de ancho de borde CSS, proporcionamos dos valores. El primer valor de 5px se aplicará a la parte superior e inferior del cuadro. El segundo valor de medio se aplicará a los lados izquierdo y derecho de la caja.
A continuación, veremos un ancho de borde CSS de ejemplo que proporciona tres valores.
div { border-width: 5px thin 10px; }En este ejemplo de ancho de borde CSS, proporcionamos tres valores. El primer valor de 5px se aplicará a la parte superior del cuadro. El segundo valor de Fino se aplicará a los lados derecho e izquierdo del cuadro. Se aplicará un tercer valor de 10 px en la parte inferior del cuadro.
A continuación, veremos un ancho de borde CSS de ejemplo que proporciona cuatro valores.
div { border-width: thick 10px 12px 0; }En este ejemplo de ancho de borde CSS, proporcionamos cuatro valores. El primer valor grueso se aplicará a la parte superior del elemento. El segundo valor de 10px se aplicará al lado derecho del cuadro. Se aplicará un tercer valor de 12 px en la parte inferior del cuadro. Se aplicará un cuarto valor de 0 al lado izquierdo del cuadro.