What we'll be creating:
A rectangle to oval hover effect. Great for portraits!
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/65077207751fb118bacb9ff3_Oval%20demo.jpg)
1) Select the rectangle and style its hover state
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/6507727ce688264bd34daea0_Oval%20-%201.png)
2) Give it a border radius of 50%
When using a percentage border radius, the radius is calculated based on the size of the element. If the width and height of the element are equal, then using a percentage border radius will result in a perfect circle. However, if the width and height are different, the percentage border radius will create an oval shape because the radius is proportional to the size of the element.
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/65077283854d2791441a2405_Oval%20-%202.png)
Note: a fixed pixel value won't work
A fixed pixel value for the border radius will yield a pill shape no matter the pixel value. See the explanation above.
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/65077288afa3d640c62321bf_Oval%20-%203.png)
3) Add a transition effect to smooth out the animation
Select "All Properties" or target "Border-Radius" specifically. Both will work.
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/6507729ce688264bd34dbf8f_Oval%20-%204.png)
Note, this isn't possible in Figma (without getting super hacky?) as Figma doesn't allow for percentage-based corner radii.