mozilla
Los resultados de tu búsqueda

    border-image

    Resumen

    La propiedad de CSS   border-image permite utilizar una imágen para definir los bordes de los elementos. Esto hace que dibujarlos sea más simple y elimina la necesidad de utilizar muchas cajas en algunos casos.

    La propiedad border-image es usada en lugar de la sentencia border-style. Por eso es muy importante tener en cuenta el valor dado por la sentencia border-image-source, que se puede establecer ya sea por la propiedad border-image-source o la abreviatura border-image, en caso de que su valor sea nulo (none), o si la imágen no se puede visualizar, se utilizarán los estilos de borde.

    • Valor inicial the concatenation of the initial values of its longhand properties:
      • border-image-source: none
      • border-image-slice: 100%
      • border-image-width: 1
      • border-image-outset: 0s
      • border-image-repeat: stretch
    • Applies to as each of the properties of the shorthand:
      • border-image-outset: all elements, except internal table elements when border-collapse is collapse
      • border-image-repeat: all elements, except internal table elements when border-collapse is collapse
      • border-image-slice: all elements, except internal table elements when border-collapse is collapse
      • border-image-source: all elements, except internal table elements when border-collapse is collapse
      • border-image-width: all elements, except table elements when border-collapse is collapse
      . It also applies to ::first-letter.
    • Heredable no
    • Percentages The values of its longhand properties the percentage value belongs to:
      • border-image-slice: refer to the size of the border image
      • border-image-width: refer to the width or height of the border image area
    • Media visual
    • Valor calculado as each of the properties of the shorthand:
      • border-image-outset: all lengths made absolute, otherwise as specified
      • border-image-repeat: as specified
      • border-image-slice: one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specified
      • border-image-source: none or the image with its URI made absolute
      • border-image-width: all lengths made absolute, otherwise as specified
    • Animatable no
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Sintaxis

    Etiquetado formal: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

    Valores

    A continuación vea las respectivas propiedades para los diferentes valores.

    Ejemplos

    Bitmap repeated (repeat)

    La imágen es cortada para rellenar el area del borde, repitiendose si es necesario.

    .example { 
      border: 30px solid transparent;
      -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
      -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
      -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
      border-image:url("/files/4127/border.png") 30 30 repeat;
    }
    

    Resultado:
    border image repeat demo

    Bitmap repeated (round)

    La opción 'round' es una variación de la opción 'repeat', la cual distribuye las partes de tal manera que los extremos se conecten bién.

    .example { 
      border: 30px solid transparent;
      -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
      -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
      -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
      border-image:url("/files/4127/border.png") 30 30 round;
    }

    Resultado:
    border image round demo

    Bitmap stretched

    La opción 'stretch' estira la imágen para rellenar todo el borde del área

    .example { 
      border: 30px solid transparent;
      -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
      -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
      -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
      border-image:url("/files/4127/border.png") 30 30 stretch;
    }

    Resultado:
    border image stretch demo

    Especificaciones

    Especificación Estado Comentarios
    CSS Backgrounds and Borders Module Level 3
    The definition of 'border-image' in that specification.
    Candidate Recommendation  

    Compatibilidad de navegadores

    Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
    Basic support

    3.5 (1.9.1)-moz [1]

    Without prefix since 15 (15)

    7.0-webkit

    Without prefix since 16.0

    11

    10.5 / 11.0-o [2]

    Without prefix since 15.0

    3.0-webkit

    Without prefix since 6.0

    optional <border-image-slice> 15 (15) ? ? ? ?
    fill keyword 15 (15) Yes ? Not supported Yes (6)
    Feature iOS Safari Opera Mini Opera Mobile Android Browser
    Basic support

    3.2-webkit

    Without prefix since 15.0 (15)

    Not supported 11.0-o 2.1-webkit
    optional <border-image-slice> 15.0 (15) Not supported ? ?
    fill keyword 15.0 (15) Not supported Not supported Yes(18)
    • [1] An earlier version of the specification was implemented, prefixed, in Gecko versions prior to 15.
    • [2] For Opera, the prefixed property was added after the non-prefixed.

    Véase también:

    Etiquetas y colaboradores del documento

    Contributors to this page: yeyxav, JuanCastela, teoli
    Última actualización por: JuanCastela,