CSS Transition Properties

backgroundbackground-colorbackground-imagebackground-positionbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-widthborder-colorborder-imageborder-image-outsetborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-widthborder-spacingborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-widthborder-widthbottombox-shadowclipclip-pathcolorcolumn-countcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-widthcolumn-widthcolumnsfilterflexflex-basisflex-growflex-shrinkfontfont-sizegapgridgrid-auto-columnsgrid-column-gapgrid-gapgrid-row-gapgrid-templategrid-template-columnsgrid-template-rowsheightleftletter-spacingline-heightmarginmargin-bottommargin-leftmargin-rightmargin-topmask-imagemask-positionmask-sizemax-heightmax-widthmin-heightmin-widthobject-positionopacityoutlineoutline-coloroutline-offsetoutline-widthpaddingpadding-bottompadding-leftpadding-rightpadding-topperspectiveperspective-originrightrow-gaptext-decorationtext-decoration-colortext-decoration-thicknesstext-indenttext-shadowtoptransformtransform-originvertical-alignwidthword-spacingz-index

CSS border-image-slice transition property


with use of the border-image-slice property you can create smooth transition between two different border-image-slice property values.

Values

This is the value you will use with border-image-slice property

ValueDescription
numberRepresents distance in pixels of the image for raster images, or vector coordinates for vector images.
percentageRelative to the size of the image: the width of the image for horizontal offsets, the height of the image for vertical offsets.
fillIf present, preserves the middle portion of the image. Otherwise, the middle is treated as transparent.

Example


Two Values

*:hover {
   
border-image-slice
 
number|%  fill
}

Three Values

*:hover {
   
border-image-slice
 
number|%  number|%  fill
}

Four Values

*:hover {
   
border-image-slice
 
number|%  number|%  number|%  fill
}

Five Values

*:hover {
   
border-image-slice
 
number|%  number|%  number|%  number|%  fill
}

References