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 transition property


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

Values

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

ValueDescription
border-image-sourceSpecifies the location of the image to be used for the border.
border-image-sliceSpecifies the inward offsets from the top, right, bottom, and left edges of the border image.
border-image-widthSpecifies the width of the border.
border-image-outsetSpecifies the amount by which the border image area extends beyond the border box.
border-image-repeatSpecifies how the middle part of the border image are scaled or tiled so that it can match the size of the border.

Example


*:hover {
   
border-image
 
border-image-source  border-image-slice / border-image-width / border-image-outset  border-image-repeat
}

References