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-bottom-right-radius transition property


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

Values

This is the value you will use with border-bottom-right-radius property

ValueDescription
lengthA length value in px, pt, cm, em, etc. Negative values are not allowed.
percentageThe size of the radius in percentage. In case of two values, percentage for the first value (i.e. horizontal radius) is calculated with respect to the width of the element's box, while percentage for the second value (i.e. vertical radius) is calculated with respect to the height of the element's box. Negative values are not allowed.

Example


One Value

*:hover {
   
border-bottom-right-radius
 
length
}

Two Values

*:hover {
   
border-bottom-right-radius
 
length  length
}

References