I have been trying to fix a cross-browser compatibility issue on my coursework page. The problem comes from the transition effect of CSS3 and it occurs on every browser apart from firefox (very strange). The rounded rectangles on the page are supposed to slowly transition colour to yellow and increase 'border-radius' to form an ellipse. In firefox both transitions work as they should. In every other only the 'background-color' changes properly - the border transitions instantly instead of slow linear change.
Does anyone have any ideas? I do not see anything wrong with the code. I have tried to look for a solution online but nothing relevant came up.