Propiedad border-image-width

La propiedad border-image-width controla el ancho de la parte visible del borde, lo escala. Si este valor es mayor que el ancho de border-width, la imagen del borde se deslizará bajo el contenido.

Para más información, consulte la propiedad border-image.

Sintaxis

selector {
	border-image-width: unidades CSS | porcentajes | número | auto;
}

Valores

Valor	Descripción
Unidades CSS	Valor en las unidades CSS especificadas.
Porcentajes	Valores en porcentaje relativos al tamaño del bloque al que se le asigna el borde.
Número	Valor numérico por el cual se multiplica `border-width`.
`auto`	Palabra clave. Si se especifica, el valor es igual al correspondiente `border-image-slice`. Si no hay un tamaño adecuado, se utiliza el valor `border-width`, donde la imagen llena toda la esquina del borde, deslizándose bajo el contenido. Consulte los ejemplos para una mejor comprensión.

Valor por defecto: 1.

Ejemplo . Número

Establezcamos el valor de border-image-width en 2 al pasar el cursor del ratón sobre el elemento. Con esto, el borde tendrá un tamaño de 26px*2 - 2 veces mayor que su ancho, establecido en border-width. El borde se deslizará bajo el texto (como un fondo):

<div id="elem"></div>

#elem:hover {
	border-image-width: 2;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ejemplo . Cambiemos border-image-repeat a round

En el ejemplo anterior, al pasar el cursor, el borde no tendrá un número entero de rombos. Corrijamos esto estableciendo border-image-repeat al valor round:

<div id="elem"></div>

#elem:hover {
	border-image-width: 2;
}
#elem {
	border-image-repeat: round;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ejemplo . Porcentajes

Establezcamos el valor de border-image-width en 50% al pasar el cursor del ratón sobre el elemento. Con esto, el borde tendrá un tamaño de 50% del tamaño del bloque (es decir, dos bordes, el derecho y el izquierdo, cubrirán todo el bloque):

<div id="elem"></div>

#elem:hover {
	border-image-width: 50%;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ejemplo . Porcentajes

Establezcamos el valor de border-image-width en 30% al pasar el cursor del ratón sobre el elemento. Con esto, el borde tendrá un tamaño de 30% del tamaño del bloque:

<div id="elem"></div>

#elem:hover {
	border-image-width: 30%;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ejemplo . Píxeles

Establezcamos el valor de border-image-width en 50px al pasar el cursor del ratón sobre el elemento:

<div id="elem"></div>

#elem:hover {
	border-image-width: 50px;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ejemplo . Valor auto

Establezcamos el valor de border-image-width en auto al pasar el cursor del ratón sobre el elemento.

Antes de pasar el cursor, border-image-width tiene el valor 1 (por defecto). En el ejemplo, border-width se establece específicamente en 52px, y border-image-slice - en el valor 26 (el efecto con auto se observará solo si border-width no es igual a border-image-slice). Debido a que border-image-width tiene el valor 1, la imagen del borde ocupará todo el ancho de border-width, es decir, se estirará a 52px. Al pasar el cursor, el valor de border-image-width se establecerá en auto y el ancho de la imagen será igual al valor de border-image-slice, es decir, 26px:

<div id="elem"></div>

#elem:hover {
	border-image-width: auto;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 52px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Véase también

la propiedad border-image,
que es una abreviatura para el borde de imagen
la propiedad border-image-source,
que establece la ruta de la imagen para el borde
la propiedad border-image-slice,
que divide la imagen para el borde
la propiedad border-image-repeat,
que repite la imagen para el borde
la propiedad border-image-outset,
que establece el desplazamiento de la imagen para el borde