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


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

Values

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

ValueDescription
colorSpecifies the color of the border. Look at CSS Color Values for the list of possible color values.
transparentAllows the border to be transparent, though it may occupy the space set by the border-width property.
initialSets this property to its default value.

Example


One Value

*:hover {
   
border-color
 
color | transparent
}

Two Values

*:hover {
   
border-color
 
color|transparent  color|transparent 
}

Three Values

*:hover {
   
border-color
 
color|transparent  color|transparent  color|transparent
}

Four Values

*:hover {
   
border-color
 
color|transparent  color|transparent  color|transparent  color|transparent
}

References