Ejemplo de ancho de borde CSS

los border-width taquigrafía CSS La propiedad establece el ancho del borde de un elemento.

Propiedades constituyentes

Esta propiedad es una abreviatura de las siguientes propiedades CSS:

• border-bottom-width
• border-left-width
• border-right-width
• border-top-width

Sintaxis

/* Keyword values */
border-width: thin;
border-width: medium;
border-width: thick;

/* <length> values */ border-width: 4px;
border-width: 1.2rem;

/* vertical | horizontal */
border-width: 2px 1.5em;

/* top | horizontal | bottom */
border-width: 1px 2em 1.5cm;

/* top | right | bottom | left */
border-width: 1px 2em 0 4rem;

/* Global keywords */
border-width: inherit;
border-width: initial;
border-width: unset;

los border-width La propiedad se puede especificar usando uno, dos, tres o cuatro valores.

• Cuando uno se especifica el valor, aplica el mismo ancho a los cuatro lados.
• Cuando dos se especifican los valores, el primer ancho se aplica a la arriba y abajo, el segundo al izquierda y derecha.
• Cuando Tres se especifican los valores, el primer ancho se aplica a la cima, el segundo al izquierda y derecha, el tercero al fondo.
• Cuando cuatro se especifican los valores, los anchos se aplican a la cima, Derecha, fondo, y izquierda en ese orden (en el sentido de las agujas del reloj).

Valores

<line-width>

Define el ancho del borde, ya sea como un explícito no negativo <length> o una palabra clave. Si es una palabra clave, debe ser uno de los siguientes valores:

thin		Un borde delgado
medium		Un borde mediano
thick		Un borde grueso

Nota: Debido a que la especificación no define el grosor exacto indicado por cada palabra clave, el resultado preciso cuando se usa una de ellas es específico de la implementación. Sin embargo, siempre siguen el patrón thin ≤ medium ≤ thicky los valores son constantes dentro de un solo documento.

Definicion formal

Sintaxis formal

<line-width>{1,4}
where 
<line-width> = <length> | thin | medium | thick

Ejemplos de

Una mezcla de valores y longitudes

HTML

<p id="sval">
    one value: 6px wide border on all 4 sides</p>
<p id="bival">
    two different values: 2px wide top and bottom border, 10px wide right and left border</p>
<p id="treval">
    three different values: 0.3em top, 9px bottom, and zero width right and left</p>
<p id="fourval">
    four different values: "thin" top, "medium" right, "thick" bottom, and 1em left</p>

CSS

#sval {
  border: ridge #ccc;
  border-width: 6px;
}
#bival {
  border: solid red;
  border-width: 2px 10px;
}
#treval {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#fourval {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}

Resultado

Especificaciones

Compatibilidad del navegador

Ver también

• Las propiedades de taquigrafía relacionadas con el borde: border, border-style, border-color
• Las propiedades relacionadas con el ancho del borde: border-bottom-width, border-left-width, border-right-width, border-top-width