Propiedad border-image-repeat

La propiedad border-image-repeat establece la forma de repetir la parte interna del borde como imagen. Para obtener más información consulte la propiedad border-image.

Sintaxis

selector {
	border-image-repeat: stretch | repeat | round;
}

Valores

Valor	Descripción
`stretch`	Estira la imagen del borde hasta los tamaños del elemento. Este valor se utiliza por defecto.
`repeat`	Repite la imagen del borde.
`round`	Repite la imagen y la escala de modo que en el lado del elemento haya un número entero de imágenes.

Valor por defecto: stretch.

Cantidad de parámetros

Puede aceptar 1 o 2 parámetros. Si se especifican dos parámetros, el primero de ellos será para el borde superior e inferior, y el segundo parámetro será para el izquierdo y derecho.

Ejemplo . Valor stretch

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

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

Ejemplo . Valor repeat

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

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

Ejemplo . Valor round

Actualmente en estado normal está establecido el valor repeat, y al pasar el cursor - round. Observe que antes de pasar el cursor en el borde cabe un número no entero de rombos, y después de pasar el cursor - un número entero. Así es como funciona round:

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

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

Ejemplo . Dos palabras

Valor repeat para el ancho y stretch para el alto:

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

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

Véase también

la propiedad border-image,
que es una abreviatura para el borde-imagen
la propiedad border-image-source,
que establece la ruta de la imagen para el borde
la propiedad border-image-slice,
que es el corte de la imagen para el borde
la propiedad border-image-width,
que establece el tamaño de la imagen para el borde
la propiedad border-image-outset,
que establece el desplazamiento de la imagen para el borde