Streaming live at 10am (PST)

Rounded corners with embeds safari


I was helping a friend with a problem and thought I share my solution with you.

If you add a video embed and add corners to that div it will not work in safari.
The solution is a little extra CSS.

First make div with corner radius and and set it to overflow hidden, and also a width. Put the video element inside that div.

Now that wrapper div needs some extra css

.video-block {
-webkit-mask-image: -webkit-radial-gradient(white, black);

You can see a working example here:

Read only:

Hope it is helpful for someone.

Video in rounded corners and overflow hidden div-element - problems with safari