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

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

Valores

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

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

css#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

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

css#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:

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

css#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:

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

css#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