Question

I have been trying to add rounded corners to a frame but it only works in mozilla and not in chrome or IE.

I am not adding the border-radius property to the image tag but to canvas tag instead

canvas {border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;}

Can anyone suggest something?

The website is n1bar.com

Answer 1

Make sure you’re setting the radius for all browsers, like this:

canvas {
    -moz-border-bottom-right-radius: 50px; /* Firefox */
    -webkit-border-bottom-right-radius: 50px; /* Safari, Chrome */
    border-bottom-right-radius: 50px; /* CSS3 */

    -moz-border-bottom-left-radius: 50px; /* Firefox */
    -webkit-border-bottom-left-radius: 50px; /* Safari, Chrome */
    border-bottom-left-radius: 50px; /* CSS3 */
}