CSS

HTML

COMPONENTS

CODE HUB

CSS Border Image Generator

Configuración

URL de Imagen

Desplazamiento

Repetir

Rango

Ancho

Clase

Vista previa

Código

ReadyTools Academy

Lerne HTML, CSS und JavaScript kostenlos mit der ReadyTools Academy.

Verfolge deinen Fortschritt, lerne in deinem eigenen Tempo und habe Spaß dabei! 🎯

Comenzar

Generador de Imagen de Borde CSS

En CSS, la propiedad border-image se utiliza para especificar una imagen que se utilizará como borde de un elemento HTML, en lugar de usar propiedades tradicionales de borde como border-width, border-style y border-color. Esta propiedad es parte del Módulo de Imagen de Borde CSS.

La propiedad border-image acepta una URL de imagen y valores opcionales para el corte del borde, anchos de borde y otras propiedades. Aquí está la sintaxis básica:

border-image: source slice width outset repeat;
  • source: Especifica la URL o referencia a la imagen utilizada como borde.
  • slice: Define cómo se corta la imagen en nueve regiones, similar a una cuadrícula de tres en raya. Esta propiedad determina qué parte de la imagen se usa para cada segmento del borde.
  • width: Establece el ancho de los segmentos del borde (como border-width).
  • outset: Controla cómo se dibujan los segmentos del borde fuera del cuadro del elemento.
  • repeat: Determina cómo se repite la imagen para llenar el área del borde.

Aquí tienes un ejemplo simplificado utilizando la propiedad border-image:

.border-image-element { border-image: url('border-image.png') 27 round; border-width: 10px; }

En este ejemplo:

  • La clase .border-image-element aplica una imagen de borde al elemento.
  • url('border-image.png') especifica la imagen que se utilizará como borde.
  • 27 define el corte de la imagen de borde en nueve regiones.
  • round especifica que los segmentos del borde deben repetirse para llenar el área del borde.
  • border-width: 10px establece el ancho de los segmentos del borde.

La propiedad border-image permite diseños de borde creativos y decorativos usando imágenes. A menudo se usa para crear elementos visualmente atractivos y únicos en una página web.