CSS Property border-image

The border-image property is employed to outline a picture to be used rather than the border designs given by the border-style properties and as a further background layer for the component.

It is a shorthand property accustomed set the longhand properties border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat.

For a close description of what every property will, please ask the property’s entry.

When a border image is to be assail a part, it’s set in many steps.

First, the image per the border-image-source property is sliced into 9 pictures—four corner images, four edge pictures, and one middle image—using the border-image-slice property.

CSS Property border-image Value

  • <‘border-image-source’>
  • <‘border-image-slice’>
  • <‘border-image-width’>
  • <‘border-image-outset’>
  • <‘border-image-repeat’>

<‘border-image-source’>

See the border-image-source property entry for a list of possible values.

<‘border-image-slice’>

See the border-image-slice property entry for a list of possible values.

<‘border-image-width’>

See the border-image-width property entry for a list of possible values.

<‘border-image-outset’>

See the border-image-outset property entry for a list of possible values.

<‘border-image-repeat’>

See the border-image-repeat property entry for a list of possible values.

Desktop Browser Support

Mobile Browser Support

Examples

.class{
  border-image: url(path/to/image.png) 25 40 25 40 / 30 40 30 40 / 30 space;
}

One comment

  1. This is a topic close to my heart cheers, where are your contact details though?

Leave a Reply