Valid circular <div> css or js means

Is there a way to create a real circular div, so it overflow:hiddencan hide everything in a div outside the circular area?

I tried to use border-radius, -moz-border-radius, -webkit-border-radius, but overflow:hiddenhid only those objects that are outside the area of ​​the square / rectangle. border-radiusreally only gives the illusion of a circle.

Then I decided that I could create a PNG image with a transparent circular area in the middle, surrounded by an opaque “background” area, to hide things outside the circular area, but again this is another illusion, and it would be useless when the background is not static, but changes according to the width and height of the screen.

So how can I make a real circular div? Using CSS or JS means?