Propiedad CSS border-image-repeat
Ejemplo
Especifique cómo repetir la imagen del borde:
#borderimg
{
border-image-source: url(border.png);
border-image-repeat: repeat;
}
Definición y uso
La border-image-repeat
propiedad especifica si la imagen del borde debe repetirse, redondearse, espaciarse o estirarse.
Sugerencia: observe también la propiedad border-image (una propiedad abreviada para configurar todas las propiedades border-image-*).
Valor por defecto: | tramo |
---|---|
Heredado: | No |
Animable: | No. Leer sobre animable |
Versión: | CSS3 |
Sintaxis de JavaScript: | objeto .style.borderImageRepeat="redondo" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
border-image-repeat | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
Sintaxis CSS
border-image-repeat: stretch|repeat|round|space|initial|inherit;
Nota: esta propiedad especifica cómo las imágenes de los lados y la parte central de la imagen del borde se escalan y se distribuyen en mosaico. Por lo tanto, puede especificar dos valores aquí. Si se omite el segundo valor, se supone que es el mismo que el primero.
Valores de propiedad
Value | Description | Play it |
---|---|---|
stretch | Default value. The image is stretched to fill the area | |
repeat | The image is tiled (repeated) to fill the area | |
round | The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so it fits | |
space | The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
páginas relacionadas
Tutorial de CSS: imágenes de borde CSS
Referencia CSS: propiedad border-image
Referencia CSS: propiedad border-image-outset
Referencia CSS: propiedad border-image-slice
Referencia CSS: propiedad border-image-source
Referencia CSS: propiedad border-image-width
Referencia HTML DOM: propiedad borderImageRepeat